Question

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

这是关于CSS在他们的网站上看起来如何的图像，我想使用javascript编辑背景图像。 CSS当我直接在deverloper工具中更改背景网址时，网站上的图片会发生变化。但它没有使用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（强调我的）：

返回所有具有所有给定类名的子元素的类数组对象。

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

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

使用getElementsByClassName从类名中查找元素

1 个答案: