更改頁面上所有元素的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 + ")");
})

就像在這個小提琴中一樣

（如果您不知道jquery，只需下載它並將其添加到html文件的標題中即可，例如：

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