javascriptで要素にクラスを付与したり削除したり(表示・非表示の切替)

javascriptで要素にクラスを付与したり削除したり(表示・非表示の切替)するのは以下のコードで実現

ボタンを押すと要素が現れたり消えたりする

.toggleで実現している

目次

HTMLコード

<button id="button">表示切替</button>
<div class="target">
 ここが表示したり消えたりする
</div>
<div class="target"> 
 ここも表示したり消えたりする 
</div>
<div>
 ここは消えない
</div>
<script>
document.getElementById("button").onclick = function() {
 var targetElements = document.getElementsByClassName('target');
 [].forEach.call(targetElements, function(elem) {
  elem.classList.toggle('hidden');
 })
};
</script>

CSSコード

.hidden{
display:none;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です