Question

我知道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！这对我的问题有什么帮助吗？

Answer 1

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

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");

从DOM中读入很多元素

1 个答案: