- ベストアンサー
一括でHTML要素を表示・非表示する方法
- JavaScriptを使用して特定の条件に合わないHTML要素のCSSプロパティを一括で書き換える方法を調査しています。
- DreamweaverのビヘイビアではID単位で要素を扱うため、複数のレイヤーを同時に表示・非表示することはできないようです。
- 例えば、ボタンを押すことで特定の条件に合わないクラスの要素を表示・非表示にしたいと考えています。
- nicofoto
- お礼率65% (30/46)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
『指定範囲内のdiv要素について、チェックして（表示/非表示）する』みたいなことでよいのでは？ class指定のないdivは常に（非表示/表示）とするのか、両方あると思いますがこんなのではどうでしょうか？ * load時は対象を指定して fuga() を実行するようなことでよいかと… （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function hoge(evt){ var t = evt.target || evt.srcElement; if(t.nodeName=="BUTTON") fuga(t.getAttribute("name")); } function fuga(str){ var div = document.getElementById("item_list").getElementsByTagName("div"); for(var i=0, d; d=div[i++];) if(d.className){ var reg = new RegExp("(^|:)" + d.className + "(:|$)"); d.style.display = reg.test(str)?"block":"none"; } } //--> </script> </head> <body> <div onclick="hoge(event)"> <button type="button" name="dog">犬表示</button> <button type="button" name="cat">猫表示</button> <button type="button" name="dog:cat">犬猫表示</button> </div> <div id="item_list"> <div class="dog">ダルメシアン</div> <div class="cat">ロシアンブルー</div> <div class="dog">柴犬</div> <div class="dog">チワワ</div> <div class="cat">シャム</div> <div class="cat">ヒマラヤン</div> <div class="cat">アビシニアン</div> <div class="dog">ゴールデンレトリーバー</div> <div>クラス指定のない要素</div> </div> </body> </html>
その他の回答 (1)
- askaaska
- ベストアンサー率35% (1455/4149)
ｊQuery.jsを使うと 簡単に実現できます。 class="dog"を一括表示処理 $(".dog").show(); class="dog"を一括非表示処理 $(".dog").hide();
お礼
お礼遅れましてすみません。 おっしゃった方法で実現することができました。 その後jQueryを勉強しまして、いろいろと応用して役立てられております。 ありがとうございました！
お礼
お礼遅くなりまして大変すみませんでした。 さらにお伺いしたいことがあったのですが、多忙で内容がまとまらず、今まで時間がかかってしまいました。 いろいろなサイトで勉強して、教えて頂いた方法を自分でも使いこなせるようになりました。が、jQueryという便利なものがあると知り、そちらを利用することにしました。 どうもありがとうございました！