时间戳

首页 > 解决方案 > 使用 getElementsByClassName 从类名中查找元素

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

问题描述

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

这是一张关于他们网站上的 CSS 外观的图片，我想使用 javascript 编辑背景图片。CSS当我直接在开发工具中更改背景网址时，网站上的图像会发生变化。但它无法使用 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)";

标签： javascriptcss

解决方案

您的代码存在多个问题。根据 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，您可以将其视为数组。有关如何迭代节点并依次更新每个节点的信息，请参阅此答案。

您使用的语法"url(LINK)"似乎也是错误的。不确定这是您实际尝试的还是只是一个示例。有关如何正确使用它的信息，请参见上文。

推荐阅读