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

HTML DOM Style borderLeftStyleプロパティとは？構文・設定値・サンプルコードを徹底解説

borderLeftStyleプロパティは、HTML要素の左ボーダー（左側の境界線）のスタイルを取得または設定するために使用されるCSSスタイルプロパティです。JavaScriptから動的に左ボーダーの見た目を変更したい場合に活用できます。

borderLeftStyleプロパティの構文

borderLeftStyleプロパティを設定する場合の基本的な構文は以下のとおりです。

object.style.borderLeftStyle = value

valueには後述するキーワード（none、solid、dashedなど）を指定します。

指定できる値の一覧

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

borderLeftStyleプロパティの使用例

次のサンプルでは、div要素に適用された左ボーダーのスタイルを、ボタンクリック時にJavaScriptで「dashed（破線）」へ動的に変更しています。

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

実行結果

初期状態では、左ボーダーは「groove（立体なくぼみ）」スタイルで表示されます。

HTML DOM Style borderLeftStyleプロパティとは？構文・設定値・サンプルコードを徹底解説

「左スタイルを変更」ボタンをクリックすると、次のように左ボーダーが「dashed（破線）」スタイルに変化します。

HTML DOM Style borderLeftStyleプロパティとは？構文・設定値・サンプルコードを徹底解説

まとめ

borderLeftStyleプロパティを使えば、CSSを書き換えることなくJavaScriptだけで要素の左ボーダースタイルを柔軟に制御できます。ユーザーの操作に応じてデザインを動的に切り替えたい場面でぜひ活用してみてください。

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

    borderStyleプロパティとはHTML DOMのborderStyleプロパティは、要素のボーダー（枠線）スタイルを一括で取得・設定できるショートハンド（省略記法）です。1〜4個の値を指定でき、指定した値の数によって以下のようにスタイルが適用されます。値を4つ指定した場合 … 上 → 右 → 下 → 左の順（時計回り）にそれぞれのボーダースタイルが適用されます。値を1つだけ指定した場合 … 4つの辺すべてに同じスタイルが適用されます。値を2つ指定した場合 … 1番目の値が上下に、2番目の値が左右に適用されます。構文borderStyleプロパティを設定する際の基本的な構文は次のとおりです

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

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