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

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

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

borderRightStyleプロパティの構文

右ボーダーのスタイルを設定する場合の構文は以下のとおりです。

object.style.borderRightStyle = value

指定できる値の一覧

borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。

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

borderRightStyleプロパティの使用例

それでは、borderRightStyleプロパティを使った具体的なサンプルコードを見てみましょう。以下の例では、ボタンをクリックするとdiv要素の右ボーダーのスタイルが「groove」から「dashed」に変化します。

サンプルコード

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

実行結果

ページを開いた直後は、右ボーダーが「groove（溝状）」スタイルで表示されます。

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

続いて、「右スタイルを変更」ボタンをクリックすると、JavaScriptによってborderRightStyleプロパティが書き換えられ、右ボーダーが「dashed（破線）」スタイルに切り替わります。

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

まとめ

borderRightStyleプロパティを使えば、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のborderStyleプロパティとは？使い方と設定できる値を徹底解説

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