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