この投稿では、HTML DOM スタイルの「backgroundImage」プロパティの動作と使用法について説明します。
JavaScript で HTML DOM スタイルの「backgroundImage」プロパティを使用する方法
HTML DOM スタイル 背景画像 」プロパティは、パスを参照して背景画像を追加することで、HTML 要素とドキュメントをカスタマイズするために使用されます。
構文 (「backgroundImage」プロパティの設定)
物体。 スタイル 。 背景画像 = 'url('URL')|なし|初期|継承'上記の構文は、次の「backgroundImage」プロパティ値をサポートしています。
- URL('URL'): 目的の背景画像の場所を指定します。
- なし： これはデフォルト値、つまり背景画像なしを表します。
- イニシャル： ブラウザのデフォルト値と似ています。
- 継承: 親要素からプロパティを継承します。
構文 (「backgroundImage」プロパティの戻り値 URL)
物体。 スタイル 。 背景画像この構文は、追加された背景画像の URL を含む文字列値を返します。
上記で定義した構文を実際に使用して、スタイルの「backgroundImage」プロパティの使用方法を説明しましょう。
例 1: スタイルの「backgroundImage」プロパティを適用して背景画像を設定する
この例ではスタイル「」を適用します。 背景画像 」プロパティを使用して、URL を指定してドキュメントに目的の背景画像を設定します。
HTMLコード
まず、記載されている HTML コードを見てください。
< h2 > 使用 HTML ドム スタイル JavaScriptのbackgroundImageプロパティ h2 >
< ボタンオンクリック = 「myFunc()」 > ここをクリック ボタン >
このコードでは:
- ” ”タグはレベル2の小見出しを追加します。
- ” <ボタン> ” タグは、” が付加されたボタンを作成します。 クリック時 「関数を実行するイベント」 myFunc() ボタンをクリックすると「」が表示されます。
JavaScript コード
次に、指定された JavaScript コードに従います。
< 脚本 >関数 myFunc ( ) {
書類。 体 。 スタイル 。 背景画像 = 「url('./html&css/image.jpg')」 ;
}
脚本 >
上記のコード スニペットでは次のようになります。
- 「」という名前の機能 myFunc() 」と定義されています。
- その定義では、「 style.backgroundImage ” プロパティは、指定された” を適用します URL 」画像を文書全体の背景に配置します。
出力
出力は、ボタンをクリックすると背景画像がドキュメント全体に追加されることを示しています。
例 2: スタイルの「backgroundImage」プロパティを適用して背景画像の URL を返す
” 背景画像 ” プロパティは、背景画像の URL を返すのにも役立ちます。実際に見てみましょう。
HTMLコード
まず、書かれた HTML コードを確認します。
< h2 > 使用 HTML ドム スタイル JavaScriptのbackgroundImageプロパティ h2 >< ディビジョンID = 「私のディビジョン」 スタイル = 「高さ: 500ピクセル; 幅: 500ピクセル;
ボーダー: 3 ピクセルの黒一色;背景画像:url('./html&css/image.jpg')' > これ は div です ディビジョン >
< h4 ID = 'デモ' > h4 >
上記のコード ブロックでは次のようになります。
- ” 背景画像 」プロパティは、指定された URL に対応する背景画像を追加する「」要素で使用されます。
- ” ” 要素は、追加された背景画像の戻り値 (URL) を表示するレベル 4 の空の小見出しを作成します。
JavaScript コード
次に、JavaScript コードに進みます。
< 脚本 >
画像をみましょう = 書類。 getElementById ( 「私のディビジョン」 ) 。 スタイル 。 背景画像 ;
書類。 getElementById ( 'デモ' ) 。 内部HTML = 画像 ;
脚本 >このコード ブロックでは次のようになります。
- 変数「」を宣言します。 画像 ”を使用する” document.getElementById() 」メソッドを使用して、ID「myDiv」を介して「」要素にアクセスし、「 背景画像 ' 財産。
- 次に、「document.getElementById()」メソッドは、ID「demo」を使用して空の小見出しを取得し、追加された背景画像の URL を表示します。
出力
出力には、「div」要素に適用された背景画像の URL が表示されます。
結論
JavaScript では「」というスタイルが使用されます。 背景画像 」プロパティを使用して、背景画像を目的の HTML 要素に割り当てるか、その URL を返します。背景画像を設定するために、「初期」、「継承」、「URL」、「なし」の 4 つのプロパティ値がサポートされています。ただし、背景画像の URL を取得するための値はサポートされていません。この投稿では、JavaScript で HTML DOM スタイルの「backgroundImage」プロパティを使用する方法について簡単に説明しました。