JavaScript を使用して Div 要素の背景画像 URL を取得する方法

JavaScript を使用して要素の背景画像 URL を取得する

質問: 背景の URL を取得するにはどうすればよいですか?特定の

<div> に割り当てられた画像JavaScriptを使用した要素?たとえば、次の HTML コードがあるとします:

<div>

背景画像の URL だけを抽出するにはどうすればよいですか?

答え: これを実現するには、次のようにします。手順:

1. 要素の特定: 参照の取得<div> へdocument.getElementById('your_div_id').
2. 計算されたスタイルを取得する: currentStyle または window.getComputedStyle() プロパティを使用して、識別された要素の計算されたスタイルを取得します。 element.
3. 背景画像 URL を抽出:計算されたスタイルからbackgroundImageプロパティにアクセスします。通常、URL はかっこで囲まれるため、slice(4, -1) を使用して不要な文字を削除します。さらに、URL 内の二重引用符は replace(/"/g, "") を使用して置き換えられます。

次のコード スニペットは、このアプローチを示しています。

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

このメソッドを使用すると、JavaScript で特定の要素の背景画像に関連付けられた URL を効率的に取得して利用できます。