HTML DOM StyleのbackgroundImageプロパティとは？使い方とサンプルコードを解説
backgroundImageプロパティは、HTML要素の背景画像を設定（set）または取得（return）するためのスタイルプロパティです。JavaScriptから動的に背景画像を変更したい場合に活用できます。
構文
backgroundImageプロパティの構文は以下のとおりです。
背景画像を設定する場合：
object.style.backgroundImage = "url('URL')|none|initial|inherit"
プロパティ値
指定できる値とその説明は以下の表のとおりです。
| 番号 | 値と説明 |
|---|---|
| 1 | url('URL') 使用する画像ファイルの場所（URL）を指定します。 |
| 2 | none 背景画像を使用しないことを指定します。これがデフォルト値です。 |
| 3 | initial このプロパティを初期値に設定します。 |
| 4 | inherit 親要素のプロパティ値を継承します。 |
サンプルコード
backgroundImageプロパティを使った具体的な例を見てみましょう。以下の例では、ボタンをクリックするとdiv要素の背景画像が別の画像に切り替わります。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 300px;
width: 500px;
background-image: url("https://www.tutorialspoint.com/mongodb/images/mongodb-minilogo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script>
function changeBackImage(){
document.getElementById("DIV1").style.backgroundImage="url('https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg')";
document.getElementById("Sample").innerHTML="背景画像がPL/SQLチュートリアルの画像に変更されました";
}
</script>
</head>
<body>
<h2>Learn</h2>
<div id="DIV1"></div>
<p>下のボタンをクリックすると、上のdivの背景画像が変更されます</p>
<button onclick="changeBackImage()">CHANGE IMAGE</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
「CHANGE IMAGE」ボタンをクリックすると、背景画像が別の画像に切り替わり、メッセージが表示されます。
-
【初心者向け】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 指定できる値の一覧 それぞれの値の意味は次の表のとおり