1. ホーム
  2. javascript

[解決済み] JavaScriptで要素の背景画像URLを取得するには?

2023-06-05 04:02:54

質問

どのようにすれば background-image の URL を取得します。 <div> 要素のURLを教えてください。 例えば、こんなのがあります。

<div style="background-image:url('http://www.example.com/img.png');">...</div>

どのようにしたら だけ のURLは background-image ?

どのように解決するのですか?

これを試してみてください。

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

// Get the image id, style and the url from it
var img = document.getElementById('testdiv'),
  style = img.currentStyle || window.getComputedStyle(img, false),
  bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Display the url to the user
console.log('Image URL: ' + bi);
<div id="testdiv" style="background-image:url('http://placehold.it/200x200');"></div>

編集します。

以下の@Miguelや他のコメントに基づいて、あなたのブラウザ(IE/FF/Chrome...)がURLに追加の引用符を追加する場合、これを試してみてください。

bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

で、シングルクォーテーションを含む可能性がある場合は replace(/['"]/g, "")

デモフィドル