HTML DOMのborderTopWidthプロパティとは？使い方とサンプルコードを解説
HTML DOMのborderTopWidthプロパティとは
HTML DOMのborderTopWidthプロパティは、要素の上側（トップ）ボーダーの幅を設定・取得するために使用されるプロパティです。JavaScriptを使って動的にボーダーの太さを変更したい場合に活用できます。
構文
borderTopWidthプロパティを設定する場合の構文は以下のとおりです。
object.style.borderTopWidth = "thin|medium|thick|length|initial|inherit"
プロパティ値の一覧
指定できるプロパティ値とその説明は以下の表のとおりです。
| 値 | 説明 |
|---|---|
| thin | 細いボーダーを指定します。 |
| medium | 中程度の太さのボーダーを指定します。デフォルト値です。 |
| thick | 太いボーダーを指定します。 |
| length | pxやemなどの長さの単位でボーダーの幅を指定します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
以下は、borderTopWidthプロパティを使って、ボタンのクリックでdiv要素の上ボーダーの幅を変更するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-Top-width:30px;
}
</style>
<script>
function changeTopWidth(){
document.getElementById("DIV1").style.borderTopWidth="1px";
document.getElementById("Sample").innerHTML="The Top border width is now decreased";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div Top border width by clicking the below button</p>
<button onclick="changeTopWidth()">Change Top Width</button>
<p id="Sample"></p>
</body>
</html>この例では、idが「DIV1」のdiv要素に対して、CSSでオレンジ色のgrooveスタイルのボーダーを適用し、上ボーダーの幅を30pxに設定しています。「Change Top Width」ボタンをクリックすると、changeTopWidth()関数が呼び出され、style.borderTopWidthによって上ボーダーの幅が1pxに変更されるとともに、メッセージが表示されます。
実行結果
ページを表示すると、上ボーダーが30pxの幅で描画されたdiv要素が確認できます。
「Change Top Width」ボタンをクリックすると、上ボーダーの幅が1pxまで縮小され、画面は次のように変化します。
-
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 プロパティを設定する際の構文は以下のとおり