クラス名で取得した複数の要素のスタイルを一括で変更する方法

Question

クラス名で取得した複数の要素のスタイルを一括で変更する方法を教えて下さい｡
下記のコードを実行しましたが､取得した要素のheightを変更できませんでした｡

  let harfText = document.getElementsByClassName("harf-text");
  for (let i = 0; i < harfText.length; i++) {
    harfText[i].style.height = "500";
  }

Answer 1

この手の処理はcssで別の専用のクラスに属性をふって、そのクラスをつけ外しすることです

Comments

[nyclsn]

確かにその方法でもできますが､なぜでしょうか？
その方式の明確なメリットがあれば､私も書き換えたいと思います｡
よろしくお願いします｡

[yambejp]

複数の指定ができたり、特別な条件を指定でき、さらに複数の属性を一度につけることができるので、汎用性が高いからです

<style>
.extend{color:red;background-Color:yellow;height:50px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll(".harf-text,.xxx").forEach(x=>{
x.classList.add('extend');
});
});

</script>
<div class="harf-text">harf-text</div>
<div class="xxx">xxx</div>
<div class="harf-text">harf-text</div>
<div class="yyy">yyy</div>
<div class="harf-text">harf-text</div>

[nyclsn]

ありがとうございます｡
大変勉強になりました｡
今後の参考にさせていただきます｡

Answer 2

  harfText[i].style.height = "500";

単位がついていません。 500px とかにする必要があるのでは。

Comments

[miyabi_pudding]

HTMLCollectionでの取得なので、そのままでは、単位を付けても動きません。

[退会済みユーザー]

いや、手元だと
harfText[i].style.height = "500px";
にするだけで動いてますね。

[miyabi_pudding]

すみません、私の勘違いでした　汗
大変申し訳ございません。

Answer 3

jQueryというJSを使用してみてはどうでしょうか？

クラスの追加 addClass(class)
クラスの削除 removeClass(class)
cssの変更　css({"color":"brown","text-align":"left"})

などを使用する事で実現できると思います。

参考URL : jQuery の基礎

Answer 4

質問者さんのコードが正しく動かなかった原因は二つあります。

取得の仕方が間違っている

for (let i = 0; i < harfText.length; i++) {
  harfText.item(i).style.height = "500";
}

HTMLCollection要素（getElements系）から、特定のインデックスの要素を取得するには、
itemメソッドを使う必要がありますことでもできます。

失礼しました、上記は、取得できない原因というわけではなかったようですね。

特定のスタイルを、JavaScriptでstyle（インナースタイル）で、変更するには、単位が必要

for (let i = 0; i < harfText.length; i++) {
  harfText.item(i).style.height = "500px";
}

heightに対しては、上記のように、なにかしらの単位を付けなければ、DOMに反映すらしません。

ただし、yambejpさんの回答通りの方が、レンダリングコスト（パフォーマンス的にも）よく、
有効であると思います。
また、newdaysysさんの回答通り、jQueryを使用した方が、構文自体はかなり行数を抑え、楽に実装できるかと。

以上です。

Comments

[kei344]

HTMLCollection はインデックスでの取得ができると思いますよ。

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

[miyabi_pudding]

ほんとだ・・・。
ご指摘ありがとうございます。
修正します。

[nyclsn]

>レンダリングコスト（パフォーマンス的にも）よく
なぜこの方式だとレンダリングコストとパフォーマンスが上がるのでしょうか？
また､どれくらいの差が生まれるのでしょうか？
よろしくお願いします｡

[miyabi_pudding]

質問の趣旨が大幅に変わると思うので、レンダリングコストや、効率などの話は別途質問立ててください。