HTML DOMのbackgroundRepeatプロパティとは？使い方とサンプルコードを解説
backgroundRepeatプロパティは、HTML DOMのスタイルオブジェクトに含まれるプロパティの一つで、要素の背景画像をどのように繰り返し表示するかを設定（set）または取得（get）するために使用されます。
構文
backgroundRepeatプロパティの基本的な構文は以下の通りです。
backgroundRepeatプロパティを設定する場合
object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|no-repeat|initial|inherit"
プロパティ値
backgroundRepeatプロパティに指定できる主な値は以下の通りです。
| 番号 | 値と説明 |
|---|---|
| 1 | repeat デフォルト値です。背景画像を縦方向・横方向の両方に繰り返して表示します。 |
| 2 | repeat-x 背景画像を横方向（水平方向）にのみ繰り返して表示します。 |
| 3 | repeat-y 背景画像を縦方向（垂直方向）にのみ繰り返して表示します。 |
| 4 | no-repeat 背景画像を繰り返さず、1回だけ表示します。 |
サンプルコード
それでは、backgroundRepeatプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: repeat-x;
color:black;
font-size:20px;
}
</style>
<script>
function changeBackRepeat(){
document.body.style.backgroundRepeat="repeat-y";
document.getElementById("Sample").innerHTML="背景画像が縦方向に繰り返されるようになりました";
}
</script>
</head>
<body>
<h2>デモ見出し</h2>
<p>これはデモ用のテキストです。</p>
<p>これはデモ用のテキストです。</p>
<p>これはデモ用のテキストです。</p>
<p>これはデモ用のテキストです。</p>
<p>下のボタンをクリックすると、bodyの背景画像の繰り返し設定が変更されます</p>
<button onclick="changeBackRepeat()">CHANGE REPEAT</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
ここで「CHANGE REPEAT」ボタンをクリックすると、JavaScriptによってbackgroundRepeatの値が「repeat-y」に変更され、背景画像が縦方向に繰り返されるように切り替わります。
このように、backgroundRepeatプロパティを使えば、JavaScriptから動的に背景画像の繰り返し方法を制御することができます。初期状態では「repeat-x」により横方向にのみ繰り返されていた背景が、ボタン操作ひとつで縦方向の繰り返しに変化することを確認できます。
-
【初心者向け】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 指定できる値の一覧 それぞれの値の意味は次の表のとおり