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:

Modular 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 に答える