HTMLDOMスタイルboxSizingプロパティ
HTML DOM boxSizingプロパティは、要素の合計の幅と高さを計算する方法を指定するために使用されます。値として「border-box」または「content-box」を含めることができます。
以下は、-
の構文です。boxSizingプロパティの設定-
object.style.boxSizing = "content-box|border-box|initial|inherit"
プロパティ値は次のように説明されます-
| コンテンツボックス | これはデフォルト値であり、パディングまたは境界線の幅はコンテンツボックスの最終的な幅に追加されます。 |
| ボーダーボックス | border-boxでは、指定された幅はそのまま残り、パディングまたは境界線が適用されると、コンテンツボックスは縮小します。 |
| 初期 | このプロパティを初期値に設定します。 |
| 継承 | 親プロパティ値を継承するには |
boxSizingプロパティの例を見てみましょう-
例
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height:100px;
width: 350px;
border: 30px solid lightpink;
box-sizing: border-box;
}
</style>
<script>
function changeBoxSizing(){
document.getElementById("DIV1").style.boxSizing="content-box";
document.getElementById("Sample").innerHTML="The box sizing is now changed to content-box ";
}
</script>
</head>
<body>
<div id="DIV1">
THIS IS SAMPLE TEXT INSIDE DIV.HELLO WORLD DIV.
</div>
<p>Change the above div box-sizing property by clicking the below button</p>
<button onclick="changeBoxSizing()">Change Box Sizing</button>
<p id="Sample"></p>
</body>
</html> 出力
[ボックスのサイズ変更]をクリックすると ボタン-
-
HTMLDOMスタイルborderRightWidthプロパティ
HTML DOM borderRightWidthプロパティは、要素の右境界線幅を設定または取得するために使用されます。 以下は、-の構文です。 borderRightWidthプロパティの設定- object.style.borderRightWidth = "thin|medium|thick|length|initial|inherit" プロパティ値は次のように説明されます- 値 説明 薄い これは細い境界線を指定します。 中 これは中程度の境界線を指定し、デフォルト値です。 厚い これは細い境界線を指定します。 長さ これは、境界
-
HTMLDOMスタイルborderWidthプロパティ
HTML DOM borderWidthプロパティは、要素の境界線幅プロパティを取得または設定するための省略形として使用されます。次のように1から4の値を取ります- 4つの値がすべて指定されている場合、時計回りに境界線の幅が割り当てられます。 値が1つだけの場合、4つの境界線すべてに同じ幅が適用されます。 2つの値を指定すると、上と下が最初の値に設定され、左と右が2番目の値に設定されます。 以下は、-の構文です。 borderWidthプロパティの設定： object.style.borderWidth = "thin|medium|thick|leng