javascript - 使用 Javascript 更改背景图像 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 = ...;