84

JavaScriptで要素のbackground-imageURLを取得するにはどうすればよいですか？<div>たとえば、私はこれを持っています：

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

のURLだけを取得するにはどうすればよいbackground-imageですか？

4

6 に答える 6

102

あなたはこれを試すことができます：

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, "")

デモフィドル

于 2012-12-23T17:44:36.477 に答える
24

他の誰かが同様のアイデアを持っている場合に備えてこれに追加するために、正規表現を使用することもできます。

var url = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];

ただし、jsPerfによると、@ PraveenのソリューションはSafariとFirefoxで実際にパフォーマンスが向上しているようです：http：//jsperf.com/match-vs-slice-and-replace

値に引用符が含まれているが、それが二重引用符であるか一重引用符であるかわからない場合を考慮したい場合は、次のようにすることができます。

var url = backgroundImage.slice(4, -1).replace(/["']/g, "");
于 2015-09-25T19:44:39.090 に答える
12

これを試して：

var url = document.getElementById("divID").style.backgroundImage;
alert(url.substring(4, url.length-1));

または、を使用してreplace：

url.replace('url(','').replace(')','');
// Or...
backgroundImage.slice(4, -1).replace(/["']/g, "");
于 2012-12-23T17:43:47.700 に答える
10

まず、背景画像のコンテンツを返す必要があります。

var img = $('#your_div_id').css('background-image');

これにより、次のようなURLが返されます。

"url（' http://www.example.com/img.png '）"

次に、このURLの不要な部分を削除する必要があります。

img = img.replace(/(url\(|\)|")/g, '');
于 2016-11-20T09:34:04.687 に答える
1 

const regex = /background-image:url\(["']?([^"']*)["']?\)/gm;
const str = `<div style="background-image:url('http://www.example.com/img.png');">...</div>`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

于 2020-07-14T03:27:54.543 に答える
1

background-image括弧や引用符なしで、すべてのURLをコンソールに記録します。

var element = document.getElementById('divId');
var prop = window.getComputedStyle(element).getPropertyValue('background-image');
var re = /url\((['"])?(.*?)\1\)/gi;
var matches;
while ((matches = re.exec(prop)) !== null) {
    console.log(matches[2]);
}
于 2020-09-02T17:23:05.200 に答える