javascript - JavaScript での DIV クラス スタイルの変更

Question

これを行うと、div ID のスタイルを変更できます...

document.getElementById('test').style.display = "none";

クラスに対して同じことを行うためにこれを行うことができないのはなぜですか?

document.getElementsByClassName('egg').style.display = "none";

クラスのスタイルを変更するにはどうすればよいですか?

ありがとう

Answer 1

document.getElementsByClassName指定されたクラスを持つ要素のリストを返します。最初の要素のいずれにも表示を設定できません。

document.getElementsByClassName('egg')[0].style.display = "none";

または、リストをループして、それぞれを目的の効果に設定します。

var eggs = document.getElementsByClassName('egg');
for(var i = 0; i < eggs.length; i++) { 
  eggs[i].style.display='none'
}

Answer 2

これはうまくいくはずです：

 var elements = document.getElementsByClassName('egg');
    for(var i = 0, length = elements.length; i < length; i++) {
         elements[i].style.display = 'none';
    }
}

注:elementsは配列です。このコードは配列をループし、各要素のスタイルを none に設定します。

Answer 3

の戻り値document.getElementsByClassName('egg')は配列です。

document.getElementsByClassName('egg').forEach(function(b) {
        b.style.display = "none";
    })

Answer 4

<script language="javascript">
function assignStyle() {
  var chks = document.getElementsByClassName('myClass');
  for (var i = 0; i < chks.length; i++) {
    chks[i].style.display = 'none';

  }

 }
 </script>

ハッピーコーディング:)

Answer 5

このすべてを行う代わりに、単純に jquery $('.myClass').css({ ...Your CSS properties here... }); を使用します。