【问题标题】：Challenge JavaScript grab image URL from HTML class挑战 JavaScript 从 HTML 类中抓取图像 URL
【发布时间】：2017-12-09 15:11:26
【问题描述】：

这个问题与之前的其他问题不同，这里我们有一个 CLASS 名称中的 STYLE。这让我觉得有点复杂。

我只想 alert() 网站中显示的图像的 url，可以通过其类名访问：

    <div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);">
</div>

我尝试过这样做：

alert( (document.querySelector('.image-container-image').textContent) );

尝试了其他不同的方法，但仍然没有成功。

我的输出应该是显示以下网址的警报： "https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg"

非常感谢您的指导。

【问题讨论】：

你在 Stack Overflow 上“挑战”我们吗？还是有人“挑战”你？
我想this answer 或许能帮到你。
您能否包括尝试达到预期结果的不同方法？我很肯定一些正则表达式可能会解决这个问题。
Javascript: Get background-image URL of <div>的可能重复

标签： javascript html css html-parsing

【解决方案1】：

JavaScript (ES6)，121 89 字节

单线，代码高尔夫风格：

alert(document.querySelector('.image-container-image').style.backgroundImage.slice(5,-2))

&lt;div class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);"&gt;&lt;/div&gt;

101 字节替代

getComputedStyle() 有效，即使 background-image 存在于外部样式表中：

alert(getComputedStyle(document.querySelector('.image-container-image')).backgroundImage.slice(5,-2))

.image-container-image{background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);}

&lt;div class='image-container-image'&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

元素上有.style.backgroundImage。您可以将其与 substring 函数一起使用来获取 url。

st =document.querySelector('.image-container-image').style.backgroundImage;
url = st.substring(5, st.length -2);

url 将变为 https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg

编辑如果您愿意，可以将其更改为一行代码。

alert(document.querySelector('.image-container-image').style.backgroundImage.substring(5, document.querySelector('.image-container-image').style.backgroundImage.length -2))

&lt;div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);"&gt;&lt;/div&gt;

【讨论】：

使用.slice(5,-2)。节省大量字节；）

【解决方案3】：

解决办法如下：

// Get the image, style and the url from it
var img = document.getElementsByClassName('image-container-image')[0],
    style = img.currentStyle || window.getComputedStyle(img, false),
    bi = style.backgroundImage.slice(4, -1);

// For IE we need to remove quotes to the proper url
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Display the url to the user
alert('Image URL: ' + bi);

 <div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);">
</div>

【讨论】：

【解决方案4】：

alert(document.querySelector('.image-container-image').style.backgroundImage.toString().replace(/(url|\(|\)|")/g, ''))

<div  class='image-container-image' style="background-image:url(https://lh4.googleusercontent.com/-2h9xCStgaCM/AAAAAAAAAAI/AAAAAAAAhjs/TNS6opAJ52g/photo.jpg);">
</div>

【讨论】：