- ベストアンサー
divのclassの内容を変更するにはどう記述すればいいですか?
divのclassの内容を変更するにはどう記述すればいいですか? 例えば <div id="usr_table" class="invisible"> という風に状況に応じて書き換えて不可視にしたいのですが
- goohoo339
- お礼率60% (3/5)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 空白を無くしたい場合は、changeStyleとスタイル指定を以下の用に変更してみて下さい。 function changeStyle(class1){ var objects = document.getElementsByTagName("*"); var length = objects.length; for(i = 0; i < length; ++i){ if(objects[i].className == class1){ if(objects[i].style.display == 'block'){ objects[i].style.display = 'none'; }else{ objects[i].style.display = 'block'; } } } } //--> </SCRIPT> <STYLE type="text/css"> <!-- .hoge1 {color:red;display:block} .hoge2 {color:blue;display:none;} --> </STYLE> 読み込み時に不可視化しformの内容により切り替えるとの事ですので、初期状態をスタイルシートで不可視に設定して(display:none;)おき、formの内容によっては表示する(display:block;)という動作のが解りやすい気がします。
その他の回答 (1)
- trisagion
- ベストアンサー率68% (15/22)
classに指定したスタイルが解らないので何とも言えないのですが、 (1)class自体を変更したい (2)classで指定した可視属性のスタイルを変更したい のどちらの意味でしょうか？ 参考です（的外れだったらごめんなさい） <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT language="javascript" type="text/javascript"> <!-- //(1)ならこちら function changeClass(class1,class2){ var objects = document.getElementsByTagName("*"); var length = objects.length; for(i = 0; i < length; ++i){ if(objects[i].className == class1){ objects[i].className = class2; }else if(objects[i].className == class2){ objects[i].className = class1; } } } //(2)ならこちら function changeStyle(class1){ var objects = document.getElementsByTagName("*"); var length = objects.length; for(i = 0; i < length; ++i){ if(objects[i].className == class1){ if(objects[i].style.visibility == 'visible'){ objects[i].style.visibility = 'hidden'; }else{ objects[i].style.visibility = 'visible'; } } } } //--> </SCRIPT> <STYLE type="text/css"> <!-- .hoge1 {color:red;visibility:visible;} .hoge2 {color:blue;visibility:hidden;} --> </STYLE> </HEAD> <BODY> <DIV class="hoge1">AAA</DIV> <DIV>(1)<A href="javascript:changeClass('hoge1','hoge2')">クラスチェンジ</A></DIV> <DIV>(2)<A href="javascript:changeStyle('hoge1')">スタイルチェンジ</A></DIV> </BODY> </HTML> (1)ではhoge1とhoge2のclassをクリックする度に入れ替えています。 (2)ではhoge1のvisibility属性をクリックする度に変更しています。 ※idを使った場合の方が(1)も(2)も簡潔にできると思います。
補足
上記を参考にして記述してみたのですが、不可視にした部分がそのまま空白として残り見苦しくなるようです 不可視としたい部分は以下のタグの中です <div ID="usr_list_table" class="visible"> classの部分を手書きで以下に変更するときれいに見えなくなるので以下のように変更する方法があれば教えてください <div ID="usr_list_table" class="invisible"> ちなみに不可視にするタイミングは読み込み時のみで <body onload="init(form)> と記述していてformの内容によりIf文で表示非表示への分岐としたいです
お礼
とてもわかりやすく参考になりました