HTML DOM スタイル borderBottom プロパティの使い方を解説
borderBottom プロパティは、要素の下ボーダー（下罫線）に関するスタイルを取得・設定するために使用されます。border-bottom プロパティは、border-bottom-width（幅）、border-bottom-style（スタイル）、border-bottom-color（色）の3つのプロパティをまとめて指定できるショートハンド（一括指定プロパティ）です。
構文
borderBottom プロパティの設定は以下のように記述します。
object.style.borderBottom = "width style color|initial|inherit"
設定できる値
borderBottom プロパティに指定できる値は以下のとおりです。
| No. | 値と説明 |
|---|---|
| 1 | Width（幅） 下ボーダーの太さを設定します。 |
| 2 | Style（スタイル） 下ボーダーの線種（solid、dotted など）を設定します。 |
| 3 | Color（色） 下ボーダーの色を設定します。 |
| 4 | Initial このプロパティを初期値に設定します。 |
| 5 | Inherit 親要素のプロパティ値を継承します。 |
サンプルコード
borderBottom プロパティの使用例を見てみましょう。ボタンをクリックすると、画像の下ボーダーが動的に変更されます。
<!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.borderBottom="10px dotted pink";
document.getElementById("Sample").innerHTML="画像の下ボーダーが変更されました";
}
</script>
</head>
<body>
<h2>Kotlin チュートリアル</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/kotlin/images/kotlin.jpg">
<p>下のボタンをクリックすると、上の画像の下ボーダーが変更されます</p>
<button onclick="changeBorder()">下ボーダーを変更</button>
<p id="Sample"></p>
</body>
</html>実行結果
上記のコードを実行すると、以下のような画面が表示されます。
「下ボーダーを変更」ボタンをクリックすると、画像の下ボーダーが「10px dotted pink（10px のピンク色の点線）」に変化します。
このように、JavaScript の style.borderBottom プロパティを使えば、幅・スタイル・色を一度に指定して、要素の下ボーダーを簡単に操作できます。
-
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デフォルト値。ボーダーを表示しませ