HTMLDOMスタイルbackgroundImageプロパティ
backgroundImageプロパティは、要素の背景画像を設定または返すために使用されます。
構文
以下は、-
の構文です。backgroundImageプロパティの設定：
object.style.backgroundImage = "url('URL')|none|initial|inherit" 値
上記のプロパティ値は次のように説明されます-
| Sr.No | 値と説明 |
|---|---|
| 1 | url（'URL'） 画像ファイルの場所を指定します。 |
| 2 | なし 使用する背景画像を指定しない場合のデフォルト値です。 |
| 3 | 初期 このプロパティを初期値に設定します。 |
| 4 | 継承 親プロパティ値を継承します。 |
例
backgroundImageプロパティの例を見てみましょう-
<!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="The background image is now changed to PL/SQL Tutorial";
}
</script>
</head>
<body>
<h2>Learn</h2>
<div id="DIV1"></div>
<p>Change the above div background image by clicking the below button</p>
<button onclick="changeBackImage()">CHANGE IMAGE</button>
<p id="Sample"></p>
</body>
</html> 出力
これにより、次の出力が生成されます-
[画像の変更]ボタンをクリックすると-
-
HTMLDOMスタイルフィルタープロパティ
HTML DOMスタイルフィルタープロパティは、要素の視覚効果を定義するために使用されます。 以下は、-の構文です。 フィルタプロパティの設定- object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()" 上記のプロパティ値は次のように説明されます- フィルター 説明 なし これは効果を指定しま
-
HTMLDOMスタイルlistStyleImageプロパティ
HTML DOMスタイルのlistStyleImageプロパティは、画像をリストアイテムマーカーとして設定または返すために使用されます。 以下は、-の構文です。 listStyleImageプロパティの設定- object.style.listStyleImage = "none|url|initial|inherit" 上記の特性は次のように説明されます- 値 説明 なし これはデフォルト値であり、画像は表示されません。 url 画像パスを指定します。 初期 このプロパティを初期値に設定します。 継承 親