HTML DOM の borderLeftWidth プロパティとは？使い方と設定例をわかりやすく解説
HTML DOM の borderLeftWidth プロパティは、要素の左側の境界線（ボーダー）の幅を設定または取得するために使用されるスタイルプロパティです。JavaScript から動的にボーダーの太さを制御したい場合に活用できます。
構文
borderLeftWidth プロパティを設定する場合の構文は以下のとおりです。
object.style.borderLeftWidth = "thin|medium|thick|length|initial|inherit"
プロパティ値の一覧
borderLeftWidth プロパティに指定できる各値の意味は次のとおりです。
| 値 | 説明 |
|---|---|
| thin | 細い境界線を指定します。 |
| medium | 中程度の太さの境界線を指定します。デフォルト値です。 |
| thick | 太い境界線を指定します。 |
| length | px や em などの単位を使って、境界線の幅を数値で指定します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
それでは、borderLeftWidth プロパティの具体的な使用例を見てみましょう。
使用例
次のサンプルでは、オレンジ色のくぼみ（groove）スタイルの境界線を持つ div 要素を用意し、ボタンのクリックによって左側の境界線の幅を 30px から 1px へと動的に変更しています。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-left-width: 30px;
}
</style>
<script>
function changeLeftWidth(){
document.getElementById("DIV1").style.borderLeftWidth = "1px";
document.getElementById("Sample").innerHTML = "左側の境界線の幅が狭くなりました";
}
</script>
</head>
<body>
<div id="DIV1">サンプルテキスト</div>
<p>下のボタンをクリックすると、上の div の左側の境界線の幅が変更されます</p>
<button onclick="changeLeftWidth()">左の幅を変更</button>
<p id="Sample"></p>
</body>
</html>
出力結果
ページを表示すると、最初は左側に太い境界線（30px）が表示されます。
「左の幅を変更」ボタンをクリックすると、JavaScript によって左側の境界線の幅が 1px に縮小され、メッセージが表示されます。
このように、borderLeftWidth プロパティを使えば、ユーザーの操作に応じて要素の左ボーダーの太さを柔軟に変更できます。上下左右すべてのボーダー幅を一括で扱いたい場合は、borderWidth プロパティの利用も検討してみてください。
-
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デフォルト値。ボーダーを表示しませ