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

HTML DOMのborderRightプロパティとは？構文と使い方をサンプルコード付きで解説

HTML DOMのborderRightプロパティは、要素の右側のボーダーに関するプロパティを取得・設定するためのショートハンド（省略記法）です。このプロパティひとつで、border-right-width（幅）、border-right-style（スタイル）、border-right-color（色）の3つの値をまとめて操作できます。

borderRightプロパティの構文

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

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

各値の意味は次の表のとおりです。

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

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

使用例

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

実行結果

ページを表示すると、最初はマゼンタ色の4pxの実線ボーダーが段落の右側に表示されます。

「右ボーダーを変更する」ボタンをクリックすると、以下のようにボーダーが赤色の9pxの破線に変わります。

コードの解説

このサンプルコードの仕組みを順番に見ていきましょう。

まず、id「P1」を持つ段落要素を作成し、そこにCSSスタイルを適用しています。テキストが含まれた段落に対して、右ボーダーとフォントサイズが指定されています。

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

次に、「右ボーダーを変更する」というボタンを作成しています。ユーザーがこのボタンをクリックすると、changeBorderRight()関数が実行されます。

<button onclick="changeBorderRight()">右ボーダーを変更する</button>

changeBorderRight()関数では、getElementById()メソッドを使ってid「P1」の段落要素を取得し、そのborderRightスタイルプロパティの値を「9px dashed red」に変更しています。さらに、innerHTMLプロパティを通じて、id「Sample」の段落に変更完了のメッセージを表示しています。

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

このように、borderRightプロパティを活用すれば、JavaScriptから要素の右ボーダーの幅・スタイル・色を一行のコードで簡単に動的に変更できます。ボタンのクリックなどのユーザー操作に応じてデザインを変えたい場合に非常に便利なプロパティなので、ぜひ活用してみてください。

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

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

  2. HTML DOMのborderRightプロパティとは？構文と使い方をサンプルコード付きで解説

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