HTML DOMのborderImageOutsetプロパティとは？使い方と設定方法をわかりやすく解説
HTML DOMのborderImageOutsetプロパティは、ボーダーイメージ（背景画像）領域が要素のボーダーボックスの外側へどれだけ広がるかを設定・取得するために使用されます。上・下・左・右それぞれの値を指定することで、要素の各ボーダーから画像がどの程度はみ出すかを個別に制御できます。
構文（Syntax）
borderImageOutsetプロパティを設定する場合の構文は以下のとおりです。
object.style.borderImageOutset = "length|number|initial|inherit"
プロパティに指定できる値
| 値 | 説明 |
|---|---|
| length（長さ） | 画像がボーダーボックスからどれだけ広がるかを定義します。デフォルト値は「0」で、この場合ボーダーボックスの外側には広がりません。 |
| number（数値） | border-width（ボーダーの幅）の倍数として広がりの大きさを定義します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
borderImageOutsetプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30
round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset(){
document.getElementById("P1").style.borderImageOutset="20px";
document.getElementById("Sample").innerHTML="The border image outset is now
increased";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
続いて、「Change Border Outset」ボタンをクリックした場合の結果です。
ボタンをクリックすると、JavaScriptによってborderImageOutsetの値が「5px」から「20px」に変更され、ボーダーイメージがボーダーボックスの外側へ大きく広がって表示されます。このように、borderImageOutsetプロパティを使うことで、JavaScriptから動的にボーダーイメージの広がりを制御することが可能です。
-
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デフォルト値。ボーダーを表示しませ