- ベストアンサー
CSSのクラスを動的に変更 classで
document.getElementById("foo").className = "love"; は可能ですが、 getElementsByClassName("foo").className = "love"; は不可能でしょうか？ よろしくお願いいたします。
- left2012
- お礼率50% (231/456)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まずgetElementsByClassName()自体をサポートしているかどうかがひっかかります それとelementsとあるように複数のオブジェクトをつかみますので forなどで処理を回す必要があります。 <script> window.onload=function(){ var n=document.getElementsByClassName("red"); for(var i=0;i<n.length;i++){ n[i].className = "green"; } } </script> <style> .red{background-Color:red;} .green{background-Color:green;} </style> <div class="red">test</div> なお、クラス名をダイレクトで変えてしまうと、他の属性をつけている場合 それもクリアになってしまうので、気をつけてください class="hoge fuga"のオブジェクトを、hogeを起点にpiyoに変えてしまうと fugaは残しておきたかったのにclass="piyo"になってしまったりするということ
その他の回答 (1)
- yuu_x
- ベストアンサー率52% (106/202)
DOM Level4 で定義されてますので、 http://www.w3.org/TR/dom/#dom-document-getelementsbyclassname ブラウザによっては使用できます。 https://developer.mozilla.org/ja/docs/DOM/document.getElementsByClassName クロスブラウザで利用したいなら、prototype.js か jQuery を用いるといいでしょう。
お礼
早速のご回答ありがとうございます。 URLもとても参考になりました。
関連するQ&A
- フラグに名前を付けるには？
spflagが0なら指定ID(i)のクラスaを除いてbを付加する、1なら逆のbを除いてaを付加するスクリプトの部分。 var spflag=0 function special(i,a,b){ if (spflag==0){ document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).remove([a], ' '); document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).merge([b], ' '); spflag=1;} else{ document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).remove([b], ' '); document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).merge([a], ' '); spflag=0;} } これのspflagにiの名前を（iはID）足してIDごとのフラグ管理を行いたいのですが、どのようにするのでしょうか？
- ベストアンサー
- JavaScript
- HTML内のクラス名の内容を取り出したい
こんにちは。 <div id ="content"> <p class="txt"> 内容 </p> </div> と言う内容のHTMLから、クラス名txtの文章を取り出したいのです。className、getElementsByClassNameなどを見てみましたが、よく意味が分かりません。 そこでなのですが、クラス名txtの文章を取り出す良い手段か、className、getElementsByClassNameについて教えていただけませんか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- classやidが変わったときに情報を更新する（？）
今現在 ボタンを押すと class やidが変化するようにしているのですが、 変化後、classやidで指定したcssの色にはなるのですが、（同時に元のclassやidのcssの色は無効になる） getElementByIdや getElementsByClassName("sw")[1]はページを読み込んだときの初期状態のidやclassに対してかかるようで、 読み込み終了後のid、classの変化後にも対応するにはどのようにするのでしょうか？ 以下のがページ読み込み後idやclassが変わっても、読み込んだ時に設定されているid、classで実行されてしまう物です。 function lod(){ document.getElementsByClassName("sw")[1].onclick = (function(){iFrame()}); document.getElementById("td").onclick = (function(){iFrame()}); }; まだJavascriptはあまり詳しくないです。 質問が下手ですいません。補足が必要でしたら出来る範囲で行います。 よろしくお願いします。タスケテー
- ベストアンサー
- JavaScript
- 同じ i 番目のclassを連動させることはできますか？
お世話になります <script type="text/javascript"><!-- window.onload = function() { 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; } obj0 = document.getElementsByClassName("id"); obj1 = document.getElementsByClassName("pass"); for(i=0;i<obj0.length;i++) { obj0[i].onclick = function() { obj1[i].style.display = "block"; } } } //--></script> <style type="text/css"><!-- .id { width:150px; float:left; cursor:pointer; } .pass { display:none; } .pass0 { width:100px; } --></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません＞＜ 名前とパス両方を入力にしてやる方法もできますし、 それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます 後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが＾＾；
- ベストアンサー
- JavaScript
- 特定のclassが含まれていたら
以前、こちらで特定のclassを表示、非表示にする方法を教えていただいたのですが、特定のclassが含まれているタグに対して表示、非表示にしたいと思いまして、質問させていただきました。 現在は<div class="a">a</div>に対して行っており、これを <div class="a b">ab</div>のような感じにも対応したいと考えております。 現在使っているスクリプトは下記になります。 どなたかご教授ください。 宜しくお願いいたします。 function change(site){ if(!document.getElementsByTagName){return;} var cname = new Array(); cname["default"] = new Object("a" == site ? "":"none"); cname["homes"] = new Object("b" == site ? "":"none"); cname["suumo"] = new Object("c" == site ? "":"none"); var objs = document.getElementsByTagName("*"); for(var i=0;i<objs.length;i++){ if(cname[(objs[i].className)] != undefined){ objs[i].style.display = cname[(objs[i].className)]; } } s_n = document.getElementById('site_name'); s_n.value = site; }
- ベストアンサー
- JavaScript
- class追加でロールオーバーするDOMのjavascript
イベントハンドラをjs内に内包したロールオーバーを作成していて、 解決できない問題が発生しています。 リンクボタンをクリックして次のページに遷移したあと、 ブラウザの戻るボタンで戻るとonmouseover時の状態で戻ってしまいます。 原因はonunloadが動作がしていないためと思います。 onunloadをonclickにするとこの問題は回避はできますが、 クリックしたら必ず別ページに遷移しなければいけなくなります。 このスクリプトは必ずしもaタグでなくてもロールオーバーできるようにしたいのでうまい解決策ではありません。 何かよい解決方法はありますでしょうか。 // javascript start window.onload = function() { if(!document.getElementsByTagName) return false; var AddClass = document.getElementsByTagName("*"); for(var i=0;i<AddClass.length;i++){ if(AddClass[i].className.match("^(.+? )?addclass.+?( .+?)?$")){ if (document.all){ // IE AddClass[i].onmouseover = AddClassOn; AddClass[i].onmouseout = AddClassOff; AddClass[i].onunload = AddClassOn; }else{ AddClass[i].addEventListener("mouseover", AddClassOn, false); AddClass[i].addEventListener("mouseout", AddClassOff, false); AddClass[i].addEventListener("unload", AddClassOff, false); } } } function AddClassOn() { id_name = this.className.replace(/^(.+? )?addclass_(.+?)_.+?( .+?)?$/i,"$2"); class_name = this.className.replace(/^(.+? )?addclass_.+?_(.+?)( .+?)?$/i,"$2") var classNameOG = document.getElementById(id_name).className; var id_Node = document.getElementById(id_name); var createAttr = document.createAttribute("class"); createAttr.nodeValue = classNameOG + " " + class_name; id_Node.setAttributeNode(createAttr); } function AddClassOff() { id_name = this.className.replace(/^(.+? )?addclass_(.+?)_.+?( .+?)?$/i,"$2"); class_name = this.className.replace(/^(.+? )?addclass_.+?_(.+?)( .+?)?$/i,"$2") var classNameOG = document.getElementById(id_name).className.replace(class_name,""); var id_Node = document.getElementById(id_name); var createAttr = document.createAttribute("class"); createAttr.nodeValue = classNameOG; id_Node.setAttributeNode(createAttr); } } // javascript end /* style start */ .changeclass{ padding:4px; background:#ff0; border:1px solid #f00; } /* style end */ /* html start */ <body id="knowhow" class="body_test"> <ol> <li><a href="test.html"><img src="image/list01.gif" class="addclass_knowhow_changeclass" width="64" height="64" alt="ボタン" /></a></li> </ol> </body> /* html end */ ちなみに現状のスクリプトはidだけにclass追加するように作っていますが、 最終形は追加するclassのid指定部分をbodyやparentやthisにすることで、 id以外にもclassが追加できる仕様にする予定です。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？ 教えてください！ 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
- PSPのWebブラウザで、動的にタグ入の文字を挿入するにはどうしたら良
PSPのWebブラウザで、動的にタグ入の文字を挿入するにはどうしたら良いですか？ <div id="aaa">ここを変える</div> function change(){ document.getElementById('aaa').innerHTML="<b>foo</b>"; } としても、<div>の中身が太文字のfooとならずに、<b>foo</b>となってしまいます。 <div id="aaa">ここを変える</div> function change(){ var aaa=document.getElementById("aaa"); aaa.firstChild.nodeValue='<b>foo</b>'; document.body.appendChild(aaa); } としても結果は同じでした。 これを太字で表示させる方法はありますか？
- ベストアンサー
- JavaScript
- matchを使用してCSSのクラスがあるか知りたい
例えばHTML内に書かれているclassを取得して fooのクラスがあるときのみalertを出したい場合、 ※<div class="hoge foo bar">のようなclassを取得 if(cls.match("/foo/")){ alert("fooがあります。"); } ・・・このように書くとclass="hoge fool bar"の時でも trueになってしまいます。 matchで正規表現を使用して判定したい場合、 どのように書けばよいのでしょうか？
- ベストアンサー
- JavaScript
- Class属性をJavaScriptで動的に切り替える
http://youmos.com/reference/set_element_class.html 上記のサイトを参考に”Class属性をJavaScriptで動的に切り替える”を実現したいのですが、記述が間違っているのか下記のソースでは動きませんでした。 /**********************************************************/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- .left { float:left; margin:0px 12px 12px 0px; } .right { float:right; margin:0px 0px 12px 12px; } --> </style> <script type="text/javascript"> var changed = false; function changeSample(){ if(changed){ setElementClass('sample_img','left'); }else{ setElementClass('sample_img','right'); } changed= (changed)?false:true; } //class要素の追加・変更 function setElementClassById(elem, value) { if(document.getElementById) { var obj = document.getElementById(elem); if(obj) { obj.className = value; } } } addListener(document.getElementById('sample_img'), 'click', changeSample, false); </script> </head> <body> <p><img src="pic_1.gif" alt="setElementClassById" id="sample_img" class="left" /> ああああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああ ああああ</p> </body> </html> /********************************************************/ どこか間違った記述がありましたらご教授頂ければ幸です。m(_ _)m 宜しくお願い申上げます。
- ベストアンサー
- JavaScript
お礼
早速のご回答ありがとうございます。 var n=document.getElementsByClassName("red"); for(var i=0;i<n.length;i++){ n[i].className = "green"; } とても参考になります。 勉強になります。