使用getElementsByClassName访问内联CSS属性

问题描述：

我有这段HTML代码。使用getElementsByClassName访问内联CSS属性

<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>

我需要在括号内获取该URL。我尝试使用getElementsByClassName()方法，但它不起作用。由于url不是一个HTML元素，我不知道如何去掉这个值。我不能使用getElementById()，因为我不能将id添加到HTML（它不是我的）。它需要在Chrome和Firefox中工作。有什么建议么？

什么浏览器代码有合作？ – Michas 2011-12-17 17:38:40

@Michas Firefox和Chrome – Isuru 2011-12-17 17:45:32

看到我的回答这个小提琴：http://jsfiddle.net/c4urself/8kj7b/ – c4urself 2011-12-17 17:45:45

答

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

+1这正是OP所要求的，没有jQuery。 – ThinkingStiff 2011-12-17 18:40:32

这完美的作品！一个聪明的人，我必须说。顺便说一句，你可以请解释第一块代码多一点？抱歉，我是JavaScript新手。 – Isuru 2011-12-17 19:40:26

@ nK0de - 很高兴你喜欢它 - 查看我的编辑以获得更全面的解释。 – 2011-12-17 19:43:53

答

。如果你是使用jQuery你可以做这样的事情

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

答

使用jQuery！

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

Example

也考虑过jQuery，但事情是我要用它来写一个greasemonkey/userscript。所以作为参考，我必须包括ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js但我了解到，Chrome不支持@require来做到这一点，这就是为什么我'试图通过HTML来完成这一点。但谢谢你的答案。 – Isuru 2011-12-17 18:03:39

您不需要它，您可以轻松地复制代码并将其粘贴到代码文件的前面。对于您的信息，最新的jQuery版本是1.7.1。 – noob 2011-12-17 18:10:14

是这样吗？我不知道。我是JavaScript新手。仍处于学习阶段。非常感谢那条信息。 – Isuru 2011-12-17 18:14:53

答

<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];

我无法添加_id_，因为这不是我的HTML代码。我希望有一个。这会容易很多。 – Isuru 2011-12-17 18:17:01

答

我想，如果你使用jQuery这将是easer。

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;

是啊！非常有趣的是，人们并不知道如果没有jquery（或另一个js框架），简单的事情会变成什么样子。 – 2011-12-17 17:41:58

是的，也考虑到了。事情是我会用它来写一个greasemonkey/userscript。因此，作为参考，我必须包含_http：//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js_但我了解到，Chrome不支持@require来执行此操作这就是为什么我试图通过HTML完成这一点。感谢你的回答。 – Isuru 2011-12-17 17:52:45

@ nK0de如果您认为通过点击向上箭头可以得到答案，并且如果您问了这个问题，您可以通过点击打勾来接受答案。 – noob 2011-12-17 18:08:37

答

您可以使用querySelector()剥离的URL（和）：

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

脚本：

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

答

如果您不必关心微软浏览器，原始的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属性

相关推荐