javascript - 使用getElementsByClassName访问内联CSS属性

我有这段HTML代码。

<div class="tagWrapper">
<i style="background-image: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/390945_10150419199065735_543370734_8636909_2105028019_a.jpg);"></i>
</div>

我需要将该括号内的网址。我尝试使用getElementsByClassName()方法，但是没有用。由于url不是HTML元素，因此我不知道如何获取该值。我不能使用getElementById()，因为我无法在HTML中添加id(这不是我的)。它需要在Chrome和Firefox中运行。有什么建议么？

最佳答案

您没有添加jQuery标记，因此这是一个本机解决方案(请注意，这可能不适用于旧版IE，但您说它只适用于Chrome和FF):

var origUrl = document.getElementsByClassName("tagWrapper")[0]
                          .children[0].style.backgroundImage;
var url = origUrl.substr(4, origUrl.length - 5);

要么

var url = origUrl.replace("url(", "").replace(")", "");

这是一个fiddle

编辑

回答您的评论

document.getElementsByClassName("tagWrapper")

获取所有具有类名称tagWrapper的元素。因此，要获得第一个，您将获得零索引

document.getElementsByClassName("tagWrapper")[0]

然后，您需要第一个 child 在此下，并在第一个 child 上拥有backgroundImage属性。

document.getElementsByClassName("tagWrapper")[0]
                          .children[0].style.backgroundImage;

从那里剥离一个url(和)很简单

var url = origUrl.substr(4, origUrl.length - 5);

要么

var url = origUrl.replace("url(", "").replace(")", "");