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

HTML DOMのborderRightColorプロパティとは？右ボーダーの色を操作する方法を解説

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

borderRightColorプロパティの構文

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

object.style.borderRightColor = "color|transparent|initial|inherit"

指定できる値の一覧

このプロパティには、以下の4つの値を指定できます。

値説明
color右ボーダーの色を指定します。デフォルトの色は黒（black）です。
transparent右ボーダーの色を透明にします。背後にあるコンテンツが透けて見えるようになります。
initialこのプロパティを初期値（デフォルト値）に戻します。
inherit親要素のプロパティ値を継承します。

borderRightColorプロパティの使用例

ここでは、画像の右ボーダーの色をボタンのクリックで変更するサンプルコードを見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #IMG1 {
        border-right:solid 8px;
        border-right-color: orange;
    }
</style>
<script>
    function changeBorderRight(){
        document.getElementById("IMG1").style.borderRightColor="lightgreen";
        document.getElementById("Sample").innerHTML="右ボーダーの色が緑色に変更されました";
    }
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
<p>下のボタンをクリックすると、上の画像の右ボーダーの色が変わります</p>
<button onclick="changeBorderRight()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>

実行結果

ページを表示すると、画像の右側にオレンジ色の実線ボーダー（幅8px）が表示されます。

「Change Border Color」ボタンをクリックすると、右ボーダーの色が薄い緑色（lightgreen）に変化し、その旨のメッセージも画面に表示されます。

コードの解説

上記の例では、以下のような処理を行っています。

1. CSSで初期スタイルを設定

ID「IMG1」を持つimg要素に対してCSSスタイルを適用し、右ボーダーを実線8px・オレンジ色に設定しています。

#IMG1 {
   border-right:solid 8px;
   border-right-color: orange;
}

2. ボタンを作成

「Change Border Color」という名前のボタンを作成し、ユーザーがクリックするとchangeBorderRight()関数が実行されるようにしています。

<button onclick="changeBorderRight()">Change Border Color</button>

3. JavaScriptでボーダーの色を変更

changeBorderRight()関数では、getElementById()メソッドを使ってID「IMG1」のimg要素を取得し、style.borderRightColorプロパティに「lightgreen」を設定しています。これにより右ボーダーの色が薄い緑色に変更され、innerHTMLプロパティを使ってID「Sample」の段落に変更完了のメッセージが表示されます。

function changeBorderRight(){
   document.getElementById("IMG1").style.borderRightColor="lightgreen";
   document.getElementById("Sample").innerHTML="右ボーダーの色が緑色に変更されました";
}

このように、borderRightColorプロパティを使えば、JavaScriptだけで簡単に要素の右ボーダーの色を動的に制御することができます。ユーザーの操作に応じてデザインを切り替えたい場面などでぜひ活用してみてください。

  1. HTML DOMのborderRightColorプロパティとは？右ボーダーの色を操作する方法を解説

    HTML DOMのborderRightColorプロパティは、要素の右ボーダーの色を取得・設定するために使用されるスタイルプロパティです。JavaScriptから動的にボーダーの色を変更したい場合に活用できます。 borderRightColorプロパティの構文 borderRightColorプロパティを設定する場合の構文は以下のとおりです。 object.style.borderRightColor = color|transparent|initial|inherit 指定できる値の一覧 このプロパティには、以下の4つの値を指定できます。 値説明 color右ボーダーの色を

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

    HTML DOMのstyle.colorプロパティは、要素内のテキストの色を取得（get）および設定（set）するために使用されるプロパティです。テキストの色は、以下のいずれかの形式で指定できます。16進数カラーコード（例：#ff0000）rgb() 関数（例：rgb(255,0,0)）rgba() 関数（透明度を含む指定）hsl() 関数（色相・彩度・輝度による指定）hsla() 関数（透明度を含むHSL指定）定義済みのカラーキーワード（例：red、blue、green など）style.colorプロパティの構文colorプロパティを設定する際の基本的な構文は次のとおりです。object.