HTML DOM スタイル borderBottomColor プロパティの使い方を徹底解説
borderBottomColor プロパティは、HTML 要素の下ボーダーの色を設定または取得するために使用される JavaScript のスタイルプロパティです。このプロパティが正しく機能するには、対象の要素にボーダーが存在している必要があるため、あらかじめ border-style を宣言しておくことが重要です。
構文
borderBottomColor プロパティに値を設定する場合の構文は以下のとおりです。
object.style.borderBottomColor = "color|transparent|initial|inherit"
現在設定されている borderBottomColor プロパティの値を取得する場合の構文は以下のとおりです。
object.style.borderBottomColor
指定できる値
borderBottomColor プロパティには、次の4種類の値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | color 下ボーダーの色を指定します。色名・16進数カラーコード・RGB値などが使用でき、デフォルトの色は黒（black）です。 |
| 2 | transparent 下ボーダーを透明にします。ボーダー領域は確保されたまま、背後のコンテンツが透けて見えるようになります。 |
| 3 | initial このプロパティをブラウザのデフォルト（初期）値に戻します。 |
| 4 | inherit 親要素の borderBottomColor の値を継承します。 |
サンプルコード
ここでは、画像の下ボーダーの色をボタン操作で動的に変更する例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#IMG1 {
border-bottom: 7px solid orange;
box-shadow: 2px 2px 4px 1px seagreen;
}
</style>
<script>
function changeBorder(){
document.getElementById("IMG1").style.borderBottomColor="pink";
document.getElementById("Sample").innerHTML="画像の下ボーダーの色が変更されました";
}
</script>
</head>
<body>
<h2>iOS チュートリアル</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/ios/images/ios.jpg">
<p>上の画像の下ボーダーを変更します...</p>
<button onclick="changeBorder()">下ボーダーを変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、最初はオレンジ色の下ボーダーが表示されます。
「下ボーダーを変更」ボタンをクリックすると、JavaScript の changeBorder() 関数が呼び出され、下ボーダーの色がピンク色に変化します。
まとめ
borderBottomColor プロパティを使えば、CSS を直接書き換えることなく、JavaScript から動的に下ボーダーの色を制御できます。ユーザーの操作に応じてデザインを切り替えたい場合などに非常に便利なプロパティなので、ぜひ活用してみてください。
-
HTML DOMのborderStyleプロパティとは？使い方と設定できる値を徹底解説
borderStyleプロパティとはHTML DOMのborderStyleプロパティは、要素のボーダー（枠線）スタイルを一括で取得・設定できるショートハンド（省略記法）です。1〜4個の値を指定でき、指定した値の数によって以下のようにスタイルが適用されます。値を4つ指定した場合 … 上 → 右 → 下 → 左の順（時計回り）にそれぞれのボーダースタイルが適用されます。値を1つだけ指定した場合 … 4つの辺すべてに同じスタイルが適用されます。値を2つ指定した場合 … 1番目の値が上下に、2番目の値が左右に適用されます。構文borderStyleプロパティを設定する際の基本的な構文は次のとおりです
-
HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説
HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文 右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。 値説明 noneデフォルト値。ボーダーを表示しませ