使用getElementsByClassName从类名中查找元素
使用getElementsByClassName从类名中查找元素
提问于 2018-06-04 01:49:37
如果类名像下面这样，我真的不知道如何使用getElementsByClassName()找到元素。
这是一张关于CSS在他们网站上的样子的图片，我想用javascript编辑背景图片。CSS当我直接在开发工具中更改背景url时，网站上的图像会发生变化。但是使用javascript不能工作，一切都没有改变。
网站的CSS：
.layer.interface-layer .main-column.right-column {
background: url(../img/gui/chat-powtarzalny-podklad.png) -251px 0px;
}我的JavaScript：
var panel = document.getElementsByClassName('.layer.interface-layer .main-column.right-column');
panel.style.background = "url(LINK)";回答 1
Stack Overflow用户
发布于 2018-06-04 01:55:34
您的代码存在多个问题。根据MDN document.getElementsByClassName (重点是我的)：
返回一个类似数组的对象，其中包含所有具有所有给定类名的子元素。
首先，这意味着您需要索引返回的对象：
var els = document.getElementsByClassName('.layer.interface-layer .main-column.right-column');
els[0].style.background = "...";然而，这仍然是行不通的，因为您试图选择的元素本身只有类名.main-column.right-column。它们的祖先有.layer.interface-layer类。
所以你要找的是document.querySelector。相反，它接受CSS选择器，这似乎是您所期望的：
var panel = document.querySelector('.layer.interface-layer .main-column.right-column');
panel.style.backgroundImage = 'url(../img/gui/chat-powtarzalny-podklad.png)';请注意，如果您希望更新多个元素，则需要使用document.querySelectorAll，它返回一个NodeList，您可以将其视为数组。有关如何迭代节点并依次更新每个节点的信息，请参阅this answer。
您使用的"url(LINK)"语法似乎也是错误的。我不确定这是不是你真正想要做的，或者仅仅是一个例子。有关如何正确使用它的信息，请参阅上面的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50669308
复制相关文章
相似问题