ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript を使用して背景画像の URL を取得するにはどうすればよいですか?

JavaScript を使用して背景画像の URL を取得するにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-12-08 02:51:11870ブラウズ

How Can I Get a Background Image URL Using JavaScript?

JavaScript を使用した要素の背景画像 URL の決定

Web ページ上の要素を操作する場合、多くの場合、その要素に関する情報を取得する必要があります。背景画像を含むスタイリング。 JavaScript には、背景画像の URL を含むこのデータを抽出する機能が用意されています。

    • 要素の取得スタイリング:
  1. document.getElementById() を使用して ID で要素を選択します (例: var img = document.getElementById('myDiv');.
    • アクセスが計算されましたスタイリング:
  2. 要素の実際のカスケード スタイルにアクセスするには、window.getComputedStyle()、または古いブラウザの場合は img.currentStyle を利用します。
    • を抽出しますURL:
  3. 計算されたスタイルから、backgroundImage プロパティを分離します。
    • スライスとトリム:
  4. 先頭の URL(" とURL の一部ではない末尾の ") 文字。
    • 引用符をエスケープしない:
  5. 必要に応じて置き換えます。エスケープされた二重引用符 (") と実際の二重引用符(").

var img = document.getElementById('your_div_id');
var style = img.currentStyle || window.getComputedStyle(img, false);
var bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

console.log('Background image URL:', bi);

このプロセスを実装する JavaScript コードの例を次に示します。

このコードは、ID を持つ要素の背景画像 URL を取得します。 your_div_id を取得し、コンソールに記録します。

以上がJavaScript を使用して背景画像の URL を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。