javascript - 使用 getElementsByClassName 从类名中查找元素

Question

如果类名如下所示，我真的不知道如何使用 getElementsByClassName() 找到元素。

这是一张关于 CSS 在他们网站上的样子的图片，我想使用 javascript 编辑背景图片。 CSS当我直接在 deverloper 工具中更改背景 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)";

Answer 1

您的代码存在多个问题。根据 MDN document.getElementsByClassName (强调我的):

Returns an array-like object of all child elements which have all of the given class names.

首先，这意味着您需要对返回的对象进行索引:

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)" 似乎也是错误的。不确定这是您实际尝试的还是只是一个例子。请参阅上文了解如何正确使用它。