HTML DOMのborderRightWidthプロパティとは？使い方とサンプルコードを解説
HTML DOMのborderRightWidthプロパティは、要素の右側の境界線（ボーダー）の幅を設定または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの太さを制御したい場合に活用できます。
構文
borderRightWidthプロパティを設定する場合の基本的な構文は以下の通りです。
object.style.borderRightWidth = "thin|medium|thick|length|initial|inherit";
プロパティの値
borderRightWidthプロパティに指定できる値は以下の通りです。
| 値 | 説明 |
|---|---|
| thin | 細い境界線を指定します。 |
| medium | 中程度の太さの境界線を指定します。これがデフォルト値です。 |
| thick | 太い境界線を指定します。 |
| length | pxやemなどの長さの単位で境界線の幅を指定します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
borderRightWidthプロパティの使用例
それでは、borderRightWidthプロパティを使った具体的なサンプルコードを見てみましょう。以下の例では、ボタンをクリックすると、div要素の右側の境界線の幅が30pxから1pxに変化します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-right-width: 30px;
}
</style>
<script>
function changeRightWidth(){
document.getElementById("DIV1").style.borderRightWidth = "1px";
document.getElementById("Sample").innerHTML = "右側の境界線の幅が狭くなりました";
}
</script>
</head>
<body>
<div id="DIV1">サンプルテキスト</div>
<p>下のボタンをクリックすると、上のdiv要素の右側の境界線の幅が変わります</p>
<button onclick="changeRightWidth()">右幅を変更</button>
<p id="Sample"></p>
</body>
</html>実行結果
ページを表示すると、オレンジ色のgrooveスタイルの境界線を持つdiv要素が表示され、右側だけが30pxの太さになっています。
ここで「右幅を変更」ボタンをクリックすると、次のように右側の境界線の幅が1pxに縮小されます。
まとめ
borderRightWidthプロパティを使用することで、JavaScriptから要素の右側の境界線の幅を簡単に操作できます。キーワード値（thin・medium・thick）だけでなく、pxなどの具体的な長さの単位も指定できるため、動的なUI表現に役立ちます。なお、上下左右すべての境界線の幅を一括で設定したい場合は、borderWidthプロパティを使用すると便利です。
-
HTML DOM の boxSizing プロパティとは？使い方と設定値を解説
HTML DOM の boxSizing プロパティは、要素全体の幅と高さをどのように計算するかを指定するために使用されます。値として「border-box」または「content-box」を指定できます。このプロパティを理解することで、padding（パディング）や border（ボーダー）を含めたレイアウトの計算方法を自由にコントロールできるようになり、レスポンシブデザインなどでも非常に役立ちます。 構文 boxSizing プロパティを設定する構文は以下のとおりです。 object.style.boxSizing = content-box|border-box|initial|inhe
-
HTML DOM の borderWidth プロパティの使い方を解説
HTML DOM の borderWidth プロパティとはHTML DOM の borderWidth プロパティは、要素の境界線（ボーダー）の幅を取得・設定するためのショートハンド（省略記法）です。値は 1 つから 4 つまで指定でき、指定した値の数に応じて以下のように解釈されます。値を 4 つ指定した場合：上・右・下・左の順（時計回り）に境界線の幅が適用されます。値を 1 つだけ指定した場合：4 つの境界線すべてに同じ幅が適用されます。値を 2 つ指定した場合：上下に 1 つ目の値、左右に 2 つ目の値が適用されます。構文borderWidth プロパティを設定する際の構文は以下のとおり