- ベストアンサー
getElementsByClassについて
こんにちは。 http://www.dustindiaz.com/top-ten-javascript/のgetElementsByClass関数を使って 指定したクラスのクラスを書き換えたいのですが どのようにすればいいかわかりません。 ------------------------------------------------------------------- function getElementsByClass(node,searchClass,tag) { var classElements = new Array(); var els = node.getElementsByTagName(tag); // use "*" for all elements var elsLen = els.length; var pattern = new RegExp("\\b"+searchClass+"\\b"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } function SwitchClass() { getElementsByClass('show').className = 'hide'; } ------------------------------------------------------------------- のような感じでクラスを書き換えたいです。 getElementsByIdでいいじゃないって思うかもしれませんが、どうしてもClassで指定したいんです。 どうかよろしくお願いします。m(_ _)m
- a-6932
- お礼率83% (10/12)
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは class名の取得は配列で格納されていますので obj = document.getElementsByClassName("show"); for(i=0;i<obj.length;i++) { obj[i].className = "hide"; } ※class名が一致するもの全部を"hide"に変える document.getElementsByClassName("show")[2].className = "hide"; ※3番目のclass="show"を"hide"に変える ようになります ※因みにgetElementsByClass(node,searchClass,tag) をどのように動かしているのか分かりませんがうまく動かされませんでした（＞＜） <script type="text/javascript"><!-- document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } function SwitchClass() { obj = document.getElementsByClassName("show"); for(i=0;i<obj.length;i++) { obj[i].className = "hide"; } } //--></script> <style type="text/css"><!-- .hide { display:none; } --></style> <input type="button" onclick="SwitchClass()" value="消去"> <div class="show">aa</div> <div class="show">bb</div> <div class="ee">cc</div> <div class="show">dd</div>
その他の回答 (4)
- auty
- ベストアンサー率58% (284/486)
function getElementsByClass(searchClass,node,tag)をそのまま使ってみました。 function SwitchClass(cn1,cn2)の引数は、 cn1: 変更前のクラス名 cn2: 変更後のクラス名 また、対象は、デフォルトのdocument全体を利用しています。 -------------------------------------------------------------------------------- <html> <head> <title>getElementsByClass</title> <script type="text/javascript"> <!-- function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)'); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } function SwitchClass(cn1,cn2) { classes = getElementsByClass(cn1); for(i=0;i<classes.length;i++) { classes[i].className = cn2; } } //--> </script> <style type="text/css"> <!-- .show { display:block; } .hide { display:none; } --> </style> <body> <input type="button" onclick="SwitchClass('show','hide')" value="showクラスの消去"/> <input type="button" onclick="SwitchClass('hide','show')" value="showクラスの表示"/> <hr/> <div class="show">111111111111</div> <div class="show">222222222222</div> <div class="other">33333333333333</div> <div class="hide">hidehidehide</div> <div class="show">4444444444444</div> </body> </html>
お礼
ありがとうございます。 大変参考になるサンプルありがとうございました。 おかげさまでばっちり出来ました！
- steel_gray
- ベストアンサー率66% (1052/1578)
試してませんが、その関数は配列を返すようですから、 対象が一つとわかっているなら#0を操作してみては？ getElementsByClass(document,'show','*')[0].className = 'hide'; また、ちょっとソレた回答かもしれませんがgetElementsByClassが使いたいと思ったなら jQueryとか使ってみては？スクリプトをシンプルに書けるようになります。 http://www.mikage.to/jquery/ ＝＝スクリプト＝＝ <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){//ロード時の処理 $('#switch').click(function(){//#switchクリック時の処理 $('.show').toggleClass('hide');//.show のclassのトグル(切替) }); }); </script> ＝＝HTML＝＝ <input type="button" value="switch" id="switch"> <p class="show">あああ</p> <p class="aaa">AAAA</p> <p class="show">いいい</p>
お礼
配列操作でうまく行きました！ jquery含めたライブラリにも親しんでいこうと思いますので その時は上のソース参考にさせてもらいます！ とてもシンプルですね。 ありがとうございました。
- arexis
- ベストアンサー率66% (66/99)
あ、書き忘れ^^; 質問者さんの書いてるコードは、そのリンク先のと違いますので、リンク先の方に対してって事で。
- arexis
- ベストアンサー率66% (66/99)
その関数を呼び出して戻ってくるのは配列ですので function SwitchClass() { var els = getElementsByClass('show'); for(var i=0; i<els.length; i++){ els[i].className = 'hide'; } } で、大丈夫かなと思います。
お礼
arexisさん、ご回答ありがとうございました。 おかげさまで出来ました！
お礼
ポイントは配列ですね。 大変助かりました。 ありがとうございました！