HTML DOMのborderImageRepeatプロパティの使い方と値の解説
HTML DOMのborderImageRepeatプロパティとは
HTML DOMのborderImageRepeatプロパティは、ボーダーイメージ（border-image）の画像スライスをどのように繰り返し表示するかを定義するために使用されます。このプロパティを利用することで、ボーダーイメージを「伸縮（stretch）」「繰り返し（repeat）」「丸め込み（round）」のいずれかの方法で表示するかを、JavaScriptから設定・取得できます。
構文
borderImageRepeatプロパティを設定する際の構文は以下のとおりです。
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"
プロパティに指定できる値
borderImageRepeatプロパティには、以下の値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | stretch 画像を領域いっぱいに引き伸ばして表示します。デフォルト値です。 |
| 2 | repeat 画像を繰り返し表示して領域を埋めます。 |
| 3 | round 画像を繰り返して領域を埋めます。画像が領域を整数回で埋めきれない場合は、自動的に拡大・縮小されて調整されます。 |
| 4 | space roundと同様に画像を繰り返しますが、画像が整数回で埋めきれない場合は、余ったスペースをタイルの間に均等に分配します。 |
| 5 | initial プロパティを初期値に設定します。 |
| 6 | inherit 親要素のプロパティ値を継承します。 |
使用例
borderImageRepeatプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#b1 {
border: 30px solid transparent;
padding: 5px;
border-image-source:
url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg");
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
<script>
function changeBorderRepeat(){
document.getElementById("b1").style.borderImageRepeat="stretch";
document.getElementById("Sample").innerHTML="ボーダーイメージが伸縮表示されます";
}
</script>
</head>
<body>
<h2>デモ見出し</h2>
<p id="b1">これは段落内のサンプルテキストです。ここには別の行のテキストも含まれています</p>
<p>下のボタンをクリックすると、上の要素のボーダーイメージの繰り返し方法が変更されます</p>
<button onclick="changeBorderRepeat()">ボーダーの繰り返しを変更</button>
<p id="Sample"></p>
</body>
</html>
出力結果
上記のコードを実行すると、次のような出力が得られます。
ボタンをクリックすると、ボーダーイメージの表示が「stretch（伸縮）」に切り替わり、次のように表示が変化します。
-
【初心者向け】HTML DOMのfilterプロパティとは？使い方とフィルター効果一覧を解説
HTML DOMのスタイルfilterプロパティは、要素に対してさまざまな視覚効果（フィルター）を適用するために使用されます。ぼかしや明るさの調整、グレースケール変換など、CSSのfilter機能をJavaScriptから動的に操作できるのが特徴です。 構文 filterプロパティを設定する際の基本構文は以下の通りです。 object.style.filter = none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | satu
-
HTML DOMのlistStyleImageプロパティとは？使い方をコード例付きで解説
HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。 listStyleImageプロパティの構文 listStyleImage プロパティを設定する場合の構文は以下のとおりです。 object.style.listStyleImage = none|url|initial|inherit 指定できる値の一覧 それぞれの値の意味は次の表のとおり