更改页面上所有元素的css背景

Question

我想通过以这种方式在其地址中添加字符串来更改页面上每个元素的背景图像：

从样式中获取元素的背景图像地址：

background-image: url("img/sprites.png");

将字符串?ver=3添加到其中，因此它将变为这样

background-image: url("img/sprites.png?ver=3");

我想我可以通过这样的事情在一个已知元素上做到这一点：

document.getElementById('elementId').style.backgroundImage += "?ver=3"

我是对的吗？

但是，我想对所有元素这样做。如何让循环访问所有元素？

Answer 1

您可以尝试使用jquery。

$("*").css('backgroundImage', $(this).css('backgroundImage')+'?ver=3');

我只是从记忆中输入了这个，所以它可能不是100％，但似乎它会起作用。

可能是这样的：

$("*").each(function(){$(this).css('backgroundImage', $(this).css('backgroundImage')+'?ver=3');});

希望这有点帮助。

Answer 2

您可以使用document.getElementsByTagName：

var elms = document.getElementsByTagName('*');
for (var i = 0, len = elms.length; i != len; ++i) {
  elms[i].style.backgroundImage += '?ver=3';
}

或者，您可以使用DOM直接修改样式表对象。您必须为不同的浏览器编写单独的代码路径，但它可能运行得更快。

Answer 3

也许像jquery这样的东西：

$('*').each(function(){
$(this).css( 'background-image', $(this).css('background-image') + "?ver=3");
});

我更喜欢在选择器中使用$（'body *'）来不包含head和html等元素。

Answer 4

假设您要为其指定背景的元素包含在具有“mysprites”类的div中：

<div id="mysprites">
    <div></div>
    <div></div>
    <div></div>
</div>

要让每个sprites.png版本号对应第i个元素，只需调用

即可

$('#mysprites').each(function(index) {
$(this).css("background-image", "url(img/sprites.png?ver=" + index + ")");
})

就像这个fiddle

一样

（如果您不知道jquery，只需download并将其添加到您的html文件的标题中，如：

<script language="javascript" type="text/javascript" src="jquery.js"></script>