3

我有这段 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()，因为我不能id在 HTML 中添加 （它不是我的）。它需要在 Chrome 和 Firefox 中运行。有什么建议么？

4

7 回答 7

2

您没有添加 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(")", "");

这是一个小提琴

编辑

回答你的评论

document.getElementsByClassName("tagWrapper")

获取所有具有类名的元素tagWrapper。所以要得到第一个，你抓住零索引

document.getElementsByClassName("tagWrapper")[0]

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

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

从那里剥离 url( 和 ) 是一件简单的事情

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

或者

var url = origUrl.replace("url(", "").replace(")", "");
于 2011-12-17T17:40:40.787 回答
2

您可以使用querySelector()：

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

脚本：

var url = document.querySelector( '.tagWrapper i' ).style.backgroundImage;
url = url.substr(4, url.length - 5);
于 2011-12-17T18:55:43.533 回答
1

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

$(".tagWrapper i").css("background-image")
于 2011-12-17T17:36:19.757 回答
1

我认为如果你使用 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;
于 2011-12-17T17:38:29.323 回答
0

使用 jQuery ！！！

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

例子

于 2011-12-17T17:36:33.140 回答
0 
<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];
于 2011-12-17T17:37:10.360 回答
0

如果您不必关心 Microsoft 浏览器，那么原始 JavaScript 非常简单。您可以使用getElementsByClassNameand 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/

于 2011-12-17T19:24:36.740 回答