HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのborderStyleプロパティとは？使い方と設定できる値を徹底解説

borderStyleプロパティとは

HTML DOMのborderStyleプロパティは、要素のボーダー（枠線）スタイルを一括で取得・設定できるショートハンド（省略記法）です。1〜4個の値を指定でき、指定した値の数によって以下のようにスタイルが適用されます。

  • 値を4つ指定した場合 … 上 → 右 → 下 → 左の順（時計回り）にそれぞれのボーダースタイルが適用されます。
  • 値を1つだけ指定した場合 … 4つの辺すべてに同じスタイルが適用されます。
  • 値を2つ指定した場合 … 1番目の値が上下に、2番目の値が左右に適用されます。

構文

borderStyleプロパティを設定する際の基本的な構文は次のとおりです。

object.style.borderStyle = value;

指定できる値の一覧

値説明
noneデフォルト値。ボーダーを表示しません。
hidden「none」とほぼ同じですが、ボーダーの領域自体は確保されます。見た目は透明でも領域としては存在します。
dotted点線のボーダーを定義します。
dashed破線のボーダーを定義します。
solid実線（一本線）のボーダーを定義します。
double二重線のボーダーを定義します。
groove立体的なくぼみ（溝）のようなボーダーを定義します。ridgeの逆の効果です。
ridge立体的に隆起したボーダーを定義します。grooveの逆の効果です。
inset要素が埋め込まれているように見える3D効果のボーダーを定義します。outsetの逆の効果です。
outset要素が浮き出ているように見える3D効果のボーダーを定義します。insetの逆の効果です。
initialこのプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

borderStyleプロパティの使用例

それでは、実際にborderStyleプロパティを使ったサンプルコードを見てみましょう。ボタンをクリックすると、div要素のボーダースタイルが「groove」から「dashed」へ動的に変更されます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        width:300px;
        height:100px;
        border: 8px solid dodgerblue;
        border-style: groove;
    }
</style>
<script>
    function changeBorderStyle(){
        document.getElementById("DIV1").style.borderStyle="dashed";
        document.getElementById("Sample").innerHTML="ボーダースタイルが破線（dashed）に変更されました";
    }
</script>
</head>
<body>
    <div id="DIV1">サンプルテキスト</div>
    <p>下のボタンをクリックすると、上のdivのボーダースタイルが変更されます</p>
    <button onclick="changeBorderStyle()">ボーダースタイルを変更</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

初期状態では、div要素に8pxの太さの「groove」スタイルのボーダーが表示されます。

「ボーダースタイルを変更」ボタンをクリックすると、JavaScriptによってborderStyleプロパティが「dashed」に書き換わり、ボーダーが破線に変化します。同時に、その旨のメッセージも画面に表示されます。

まとめ

borderStyleプロパティを使えば、CSSを直接編集することなく、JavaScriptから動的にボーダーのスタイルを変更できます。ユーザーの操作に応じてデザインを切り替えたい場合などに非常に便利なので、ぜひ活用してみてください。

  1. 【HTML DOM】borderTopプロパティの使い方とサンプルコード解説

    HTML DOM の borderTop プロパティとはHTML DOM の borderTop プロパティは、要素の上側（トップ）のボーダーに関するスタイルを、まとめて取得・設定できるショートハンド（省略記法）です。このプロパティひとつで、border-top-width（幅）、border-top-style（スタイル）、border-top-color（色）の3つの値を同時に操作できます。構文borderTop プロパティを設定する場合の構文は以下のとおりです。object.style.borderTop = "width style color|initial|inherit

  2. HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説

    HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文 右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。 値説明 noneデフォルト値。ボーダーを表示しませ