class指定したHTML要素の背景色を変えるには

質問

HTML文書中で，class指定した要素の背景色を変更するには，どのようにしたら良いのでしょうか。

例：
<div id="HOGE">
<p class="hoge">
Hellow!
</p>
</div>

id指定の要素に対しては，
document.getElementById('HOGE').style.backgroundColor="red";
として成功しましたが，class="hoge"に対してはどのように指定すれば良いのかわかりません。

よろしくお願いします。

回答No.3

BLUEPIXY · ベストアンサー

ＩＥ限定になってしまってもいいのなら
var Obj=document.all.tags("p");
//すべての場合
//var Obj=document.all;

for(i=0;i<Obj.length;i++){
if(Obj[i].className=="hoge"){
Obj[i].style.backgroundColor="red";
}
}
でできますが。

お礼

希望どおりの動作結果が得られました。
タグを指定すれば動作も軽く，IEとOperaで動作確認が取れました。
ありがとうございました。

回答No.2

trisagion

私もclass指定の物だけを得る方法は知りませんが、力技でこんな方法があります。

function getElementsByClassName(hoge){
　var objects = document.getElementsByTagName("*");
　var length = objects.length;
　for(i = 0; i < length; ++i){
　　if(objects[i].className == hoge){
　　　objects[i].style.backgroundColor = "red";
　　}
}

<A href="javascript:getEolementsByClassName('hoge')">hogeの背景色変更</A>

すべての要素を取り出し、その要素のclass名が変数hogeと一致すれば背景色を変えるという方法です。
もし、一定のタグにしかそのclassが存在しないならば、
document.getElementsByTagName("P")
のようにした方が軽快な動きになると思います。

お礼

解説のおかげで，すんなりと理解することが出来ました。
ありがとうございました。

回答No.1

hinchun169

私の知る限りでは、無理だと思われます。

ただし、IDとCLASSの両方設定してある場合、特定のIDのCLASS属性値を変えることはできます。
ただ、それも「クラス属性値」（たとえば、class="hoge"の”hoge”）を変えるだけであって、「クラス内の色の変更」（たとえば、color:red;の”red”だけを変更）などはできません。

IDとCLASSの両方設定してある場合の変更方法は、下のURLを参照してみてください。

参考URL：

http://east.portland.ne.jp/~sigekazu/css/javascript3.htm