CSSのクラスを動的に変更 classで

document.getElementById("foo").className = "love";
は可能ですが、
getElementsByClassName("foo").className = "love";
は不可能でしょうか？

よろしくお願いいたします。

No.2 ベストアンサー 回答者： yambejp 回答日時： 2013/02/15 19:44

まず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"になってしまったりするということ

この回答へのお礼

早速のご回答ありがとうございます。

var n=document.getElementsByClassName("red");
for(var i=0;i<n.length;i++){
n[i].className = "green";
}

とても参考になります。
勉強になります。

お礼日時：2013/02/15 20:10

No.1 回答者： yuu_x 回答日時： 2013/02/15 19:26

DOM Level4 で定義されてますので、

http://www.w3.org/TR/dom/#dom-document-getelemen …

ブラウザによっては使用できます。

https://developer.mozilla.org/ja/docs/DOM/docume …

クロスブラウザで利用したいなら、prototype.js か jQuery を用いるといいでしょう。

この回答へのお礼

早速のご回答ありがとうございます。
URLもとても参考になりました。

お礼日時：2013/02/15 20:08