Question

我有这段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中运行。有什么建议吗？

Answer 1

你没有添加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]

然后你想要那里的第一个孩子，以及第一个孩子的backgroundImage属性。

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

从那里剥离网址（和）是一件简单的事情

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

或

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

Answer 2

您可以使用querySelector()：

演示：http://jsfiddle.net/ThinkingStiff/gFy6R/

脚本：

var url = document.querySelector( '.tagWrapper i' ).style.backgroundImage;
url = url.substr(4, url.length - 5);

Answer 3

如果你在哪里使用jquery你可以做这样的事情

$(".tagWrapper i").css("background-image")

Answer 4

我认为如果你使用jQuery它会更容易。

var w = document.getElementsByClassName('tagWrapper')[0];
for (var i=0; i<w.childNodes.length; i++)
  if (w.childNodes[i].tagName && w.childNodes[i].tagName.toLowerCase() == 'i')
    return w.childNodes[i].style.backgroundImage;

Answer 5

使用jQuery !!!

$("div.tagWrapper i").css("background-image").substr(4, $("div.tagWrapper i").css("background-image").length-5)

Example

Answer 6

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

// script / without jQuery

var url = document.getElementById('something').style.backgroundImage.match(/\((.*?)\)/)[1];

Answer 7

如果您不必关心Microsoft浏览器，那么原始JavaScript非常简单。您可以使用getElementsByClassName和getElementsByTagName，但尝试querySelectorAll会更容易。我把两者都包括在内。正则表达式的使用保留了相对链接。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type='text/javascript'>
    var do_find_a = function() {
        var tmp = document.getElementsByClassName('tagWrapper')[0];
        var tst = tmp.getElementsByTagName('i')[0].getAttribute('style');
        return do_alert(tst);
    }
    var do_find_b = function() {
        var tst = document.querySelectorAll('.tagWrapper i')[0].getAttribute('style');
        return do_alert(tst);
    }
    var do_alert = function(tst) {
        var reg = /background-image:\s*url\(["']?([^'"]*)["']?\);?/
        var ret = reg.exec(tst);
        alert (ret[1]);
        return;
    }
    document.addEventListener('DOMContentLoaded',do_find_a,false);
    document.addEventListener('DOMContentLoaded',do_find_b,false);
</script>
</head>
<body>
    <div class='tagWrapper'>
        <i style='background-image: url("http://example.com/image.jpg");'></i>
    </div>
    Text to ignore.
</body>
</html>

和jsFiddle版本：
http://jsfiddle.net/hpgmr/

使用getElementsByClassName访问内联CSS属性

7 个答案: