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

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

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

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

<div>
<p>背景画像の URL だけを抽出するにはどうすればよいですか?</p>
<p><strong>答え:</strong> これを実現するには、次のようにします。手順:</p>
<ol><li>
<strong>要素の特定:</strong> 参照の取得<div> へdocument.getElementById('your_div_id').<li>
<strong>計算されたスタイルを取得する:</strong> currentStyle または window.getComputedStyle() プロパティを使用して、識別された要素の計算されたスタイルを取得します。 element.</li>
<li>
<strong>背景画像 URL を抽出:</strong>計算されたスタイルからbackgroundImageプロパティにアクセスします。通常、URL はかっこで囲まれるため、slice(4, -1) を使用して不要な文字を削除します。さらに、URL 内の二重引用符は replace(/"/g, "") を使用して置き換えられます。</li>
<p>次のコード スニペットは、このアプローチを示しています。</p>
<pre class="brush:php;toolbar:false">var img = document.getElementById('your_div_id'),
    style = img.currentStyle || window.getComputedStyle(img, false),
    bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

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