bla********

2010/3/23 20:57

44回答

Jqueryで指定したIDのclassを変更したい 例えば <div id="test1" class="scroll_off"></div> というタグがある場合、IDが"test1"のclassを"scroll_on"に変更したいのですが、どのように記述すればいいのでしょうか？ addClassやremoveClassがあることまでは調べたのですが、変更を行う関数はないのでしょうか？ もしくはaddClassとremoveClassを併用して変更しないとならないのでしょうか？ ご回答お願いします。

JavaScript・35,682閲覧・xmlns="http://www.w3.org/2000/svg">25

ベストアンサー

pro********

2010/3/23 21:39

知ってる限りでは、jQueryにクラス名を変更するメソッドはありません。 jQueryにこだわらないのであれば、 document.getElementById('test1').className = "scroll_on"; という具合に、直接上書きしてしまうのが簡単。 要素に複数のクラス名がついていて、そのうちの一つだけを変更したい場合は、removeClass/addClassを使う方が簡単。 メソッドチェーンを使えるはずだから、併用したって大した手間じゃないよね。 $("#test1").removeClass("scroll_off").addClass("scroll_on");

この回答はいかがでしたか？ リアクションしてみよう

ThanksImg質問者からのお礼コメント

みなさんご回答ありがとうございました。 全員にお礼したいところですが、一番早い方とさせて頂きます。 mue_xさんもわかりやすい補足ありがとうございました。

お礼日時：2010/3/24 20:49

その他の回答（3件）

mue********

2010/3/23 23:07

他の人にちょっとだけ補足。 >addClassやremoveClassがあることまでは調べたのですが、変更を行う関数はないのでしょうか？ classってさ、idと違って1つの要素が複数のclassを持つことがあるよね。 ex. <p class="foo bar">foobar</p> これだとfooとbarの2つのclassを持つことになる。これを「変更」にしてしまうと、1つだけ変更したい場合でも2つのclassがまとめて影響受ける。だから特定のclassを消す、指定したclassを加えるっていう処理になってるのだと考えられる。 ｊQueryは関係無いが、特定のclassを置き換えたいならclassNameのreplaceでもいいかもしれない。まぁremoveClass/addClassが楽か。

aaaaa

2010/3/23 21:43

そうだと思います。removeClassでscroll_offを削除しaddClassでscroll_onを追加、だと思います。 <!--ここから--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>クラスの入れ替え</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#test1").click(function(){ if ($(this).is(".scroll_off")){//#test1のクラスにscroll_offが指定されているか $(this).removeClass("scroll_off");//scroll_offを削除して、 $(this).addClass("scroll_on");//scroll_onを適用する }else{//scroll_offがなかった場合 $(this).removeClass("scroll_on");//scroll_onを削除して、 $(this).addClass("scroll_off");//scroll_offを適用する } }); }); //--> </script> <style type="text/css"> <!-- .scroll_off{ background-color:#dddddd; } .scroll_on{ background-color:#ffdddd; } --> </style> </head> <body> <div id="test1" class="scroll_off">DIV要素</div> </body> </html> <!--ここまで--> 上ではとりあえずクリックする度にscroll_onとscroll_offを入れ替えています。

think49

2010/3/23 23:43（編集あり）

「class属性値をセットする」ということで attr() を使えば、お望みの動作になるようです。 <div id="test1" class="scroll_off"></div> <script type="text/javascript"> $('#test1').attr('class',function(){ return 'scroll_on'; }); </script> attr(key,fn) - jQuery 日本語リファレンス http://semooh.jp/jquery/api/attributes/attr/key%2Cfn/ DOMのclassNameに相当するプロパティはなさそうな感じです。 単純に要素ノードを返してくれると思っていて、className が使えると信じていたので、予想外の動作でした。 場合によってはjQuery記法ではない方がスマートな場合もあるかもしれません。 document.getElementById('test1').className = 'scroll_on'; (補足) > addClassやremoveClassがあることまでは調べたのですが、変更を行う関数はないのでしょうか？ よく読むと「変更」であって、「代入」ではないですね。 <div id="test1" class="foo scroll_off hoge"></div> <script type="text/javascript"> $('#test1').replaceClass('scroll_off','scroll_on'); // class="foo scroll_on hoge" に変更する </script> というような動作を期待されているのでしたら、ないと思います。(あったらいいんですけどね…。) ちなみに、ライブラリなしでこれを実装するとしたら、以下のようになります。 <div id="test1" class="foo scroll_off hoge"></div> <script type="text/javascript"> document.getElementById('test1').className = document.getElementById('test1').className.replace(/(^|\s)scroll_off(?=$|\s)/, '$1scroll_on'); </script> # Re: blazei5250さん