使用Java腳本更改背景圖像CSS

Question

我有一個Wordpress網站，其背景在類的標題內。

我想寫一些JS來根據主題標簽更改此背景圖片。 Hashtag腳本正在運行，但更改BG位不起作用-請幫助... :-(

我寫的腳本是：

  document.getElementsByClassName("eut-bg-image").style.backgroundImage = "url(https://boutiqueballer.com/wp/wp-content/uploads/2017/10/chanel.jpg)";
})();

Answer 1

getElementsByClassName產生元素的集合。 集合中的各個元素具有style屬性，而不是集合本身。 如果您僅定位一個元素，則可以按索引訪問它：

document.getElementsByClassName('eut-bg-image')[0].style.backgroundImage = ...;

如果您要定位多個元素，則可以對其進行迭代：

var elements = document.getElementsByClassName('eut-bg-image');
for(var i = 0; i < elements.length; i++)
   elements[i].style.backgroundImage = ...;

或者，您可以使用document.querySelector ，具體取決於所需的瀏覽器兼容性級別。 然后，您可以在需要集合的情況下區分document.querySelectorAll ，或者在僅需要第一個匹配項的情況下區分docment.querySelector 。 接受CSS選擇器：

document.querySelector('.eut-bg-image').style.backgroundImage = ...;