0

我知道 JS 基础知识，但我想更进一步。

我想在很多元素的 JS 的帮助下更改 CSS。问题是我知道选择元素的唯一方法是

const name = document.getElement...(id/class/tag etc.);

所以我稍后可以通过它的名称引用该元素并通过以下方式更改其样式：

name.style.cssproperty = "something";

这没关系，但是当我已经有 10 个元素时，我觉得这样做效率很低。

所以我的问题是，有没有更好的方法来更有效地动态更改 CSS，所以我的代码开头看起来不像这样：

const name = document.getElement...(id/class/tag etc.);
const name = document.getElement...(id/class/tag etc.);
const name = document.getElement...(id/class/tag etc.);
const name = document.getElement...(id/class/tag etc.);
const name = document.getElement...(id/class/tag etc.);
etc...

还是有这么多变量是正常的？

我希望我的问题能被理解。

PS：

我刚开始学习模块化 JavaScript！这对我的问题有什么帮助吗？

4

1 回答 1

0

您可以通过给定的类获取所有元素：

const elements = document.querySelectorAll('my-class');

现在您可以遍历获取的元素：

for (var i = 0; i < elements.length; i++) {
  elements[i].style.cssproperty = "something";
}

或者，如果 ES6+ 在您的环境中可用：

elements.forEach(element => element.style.cssproperty = "something");
于 2016-12-01T22:44:09.063 回答