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

HTML DOMのborderLeftプロパティとは？使い方とサンプルコードを解説

HTML DOMのborderLeftプロパティは、要素の左ボーダー（境界線）に関するプロパティを取得・設定するためのショートハンド（省略記法）です。このプロパティひとつで、以下の3つの個別プロパティをまとめて操作できます。

  • border-left-width（左ボーダーの幅）
  • border-left-style（左ボーダーのスタイル）
  • border-left-color（左ボーダーの色）

構文

borderLeftプロパティを設定する場合の構文は以下のとおりです。

object.style.borderLeft = "width style color | initial | inherit"

パラメータの説明

パラメータ説明
width左ボーダーの幅を設定します。
style左ボーダーのスタイル（実線・破線など）を設定します。
color左ボーダーの色を設定します。
initialプロパティをデフォルト値に設定します。
inherit親要素のプロパティ値を継承します。

それでは、borderLeftプロパティの具体的な使用例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #P1 {
        border-left: 4px solid magenta;
        font-size: 1.5rem;
    }
</style>
<script>
    function changeBorderLeft(){
        document.getElementById("P1").style.borderLeft="9px dashed red";
        document.getElementById("Sample").innerHTML="段落要素の左ボーダーが変更されました";
    }
</script>
</head>
<body>
<p id="P1">これは段落内のサンプルテキストです。こちらはサンプルテキストのもう一行目です</p>
<p>下のボタンをクリックすると、上の段落の左ボーダーのプロパティが変更されます</p>
<button onclick="changeBorderLeft()">左ボーダーを変更</button>
<p id="Sample"></p>
</body>
</html>

実行結果

初期表示は以下のようになります。

HTML DOMのborderLeftプロパティとは？使い方とサンプルコードを解説

続いて、「左ボーダーを変更」ボタンをクリックした後の表示です。

HTML DOMのborderLeftプロパティとは？使い方とサンプルコードを解説

コードの解説

上記のサンプルコードでは、以下のような処理が行われています。

1. 段落要素とCSSスタイルの定義

まず、id「P1」を持つ段落要素を作成し、その中にテキストを配置するとともに、対応するCSSスタイルを適用しています。

#P1 {
    border-left: 4px solid magenta;
    font-size: 1.5rem;
}
<p id="P1">これは段落内のサンプルテキストです。こちらはサンプルテキストのもう一行目です</p>

この時点では、段落の左側に4pxのマゼンタ色の実線ボーダーが表示されます。

2. ボタンの作成

次に、ユーザーがクリックするとchangeBorderLeft()関数を実行する「左ボーダーを変更」ボタンを作成しています。

<button onclick="changeBorderLeft()">左ボーダーを変更</button>

3. changeBorderLeft()関数の処理内容

changeBorderLeft()関数では、getElementById()メソッドを使用してid「P1」の段落要素のborderLeftスタイルプロパティを取得し、その値を「9px dashed red（9pxの赤色の破線）」に変更しています。さらに、innerHTMLプロパティを使って、id「Sample」の段落に変更が完了したことを示すメッセージを表示しています。

function changeBorderLeft(){
    document.getElementById("P1").style.borderLeft="9px dashed red";
    document.getElementById("Sample").innerHTML="段落要素の左ボーダーが変更されました";
}

このようにborderLeftプロパティを使えば、幅・スタイル・色を1行のコードでまとめて変更できるため、JavaScriptから動的にボーダースタイルを操作する際に非常に便利です。

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

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

  2. HTML DOMのStyle leftプロパティとは？使い方とサンプルコードを解説

    HTML DOM Style leftプロパティとはHTML DOMのleftプロパティは、位置指定された要素の「左からの位置」を設定または取得するために使用されます。なお、このプロパティで要素の位置を制御するには、対象要素のCSS positionプロパティが relative、absolute、fixed のいずれかに設定されている必要があります。構文leftプロパティを設定する際の構文は以下の通りです。object.style.left = auto|length|%|initial|inherit;指定できる値の一覧値説明autoデフォルト値です。左位置はブラウザが自動的に決定します。