ここから本文です

OnClickでclass属性の色を変える方法

tri********さん

2010/2/1722:39:18

OnClickでclass属性の色を変える方法

どうしてもWebで検索できなかったので教えて下さい。


<div id="box1">box1</div>

<img src="img/01.gif" onclick="getElementById('box1').style.backgroundColor= '#ffff00'">

HTMLにこのように記述した場合、img01ボタンを押すとID box1の背景が#ffff00色になります。


<div class="box2">box2</div>

と属性をclassにした場合

<img src="img/01.gif" onclick= 以後はどのように記述すればよいのでしょうか?


ご教授よろしくお願い致します。

閲覧数:
2,682
回答数:
2

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

siiさん

編集あり2010/2/1800:07:46

getElementByIdメソッドは特定のidを持つ要素を取得するメソッドです。これに対応する、特定のclass属性を持つ要素を取得するメソッドはgetElementsByClassNameというメソッドです。

ここで注意しなければならないのは、id属性は同じ文書内で重複することはありませんが、class属性は同一文書の中でも重複が普通に起こり得るということです。

よーく見てみると、getElementByIdメソッドは「Element」と単数形ですが、getElementsByClassNameメソッドは「Elements」と複数形になっていますよね。つまり、getElementByIdメソッドは対象の要素を1つだけ返すのに対して、getElementsByClassNameメソッドは複数の要素を返すメソッドであるということです。

なので、getElementsByClassNameメソッドを使う場合は、「box2」というclassを持つすべての要素を対象とするのか、「box2」というclassを持つ要素の中で、特定の要素だけ(例えば3番目、など)を対象とするのかによって処理が変わってきます。

ながーい前置きはこのあたりにして、

--------------------

<div class="box2">box2</div>

<img alt="please push this!" onclick="document.getElementsByClassName('box2')[0].style.backgroundColor = '#ff0'">

--------------------

「box2」というclassを持つ要素のうち、1番目の要素を対象とするのであれば上記のようになります。

getElementsByClassName('box2')

で「box2」というclassを持つ要素の集合(NodeList)を取得していますが、このNodeListは配列と同じようにアクセスすることができますので、

getElementsByClassName('box2')[0]

とすると取得したNodeListのうち1番目の要素を参照することができます。あとはgetElementByIdメソッドを使ったときと同じですね。

------------

いくつか注意点を…。

・getElementByIdメソッドを使うときは、必ずdocument.getElementByIdと、documentから始めて下さい。

・img要素には必ずalt属性を入れましょう。

・IE6はgetElementsByClassNameメソッドを実装していませんので、お手元でテストする際は別なブラウザを使って下さい。自作のgetElementsByClassNameメソッドを公開されている方もいますので、IE6対応も視野に入れるのであれば探してみて下さい。

質問した人からのコメント

2010/2/18 19:09:53

降参 sii_sideさん、大変分かり易く親切なご解答をありがとうございました。うまくいきました。ご注意頂いた内容については今後気をつけていきますね。
yhmtakさん、別の面からのアプローチを丁寧に教えて頂き、ありがとうございました。あまり分かっていないことがばれていますね"^_^"。jQueryについてもこれから勉強していきます。

ベストアンサー以外の回答

1〜1件/1件中

yhm********さん

2010/2/1814:51:10

JavaScriptが良く分からないうちは、jQueryなどのライブラリを使ったほうが良いでしょう。ライブラリとは、JavaScriptでよく使う機能を簡単に扱えるようにするJavaScriptのことで、有名なものにjQueryやprototypeなどがあります。最近ではホームページ制作会社でもJavaScriptをゼロから書かずにjQueryを使ってしまうことが増えてきています。

jQueryを使えば

$(function(){
$("img[src='img/01.gif']").click(function(){
$("#box1").css("background-color","#ff0");
});
});

と書くことができると思います。


$(function(){

});

これで囲った部分は「ページのHTMLが読み込み終わったら」実行するという意味です。


$("img[src='img/01.gif']")

これは「src属性がimg/01.gifであるimg要素を選択する」という意味です。


.click(function(){

});

これで囲った部分は「選択した要素がクリックされたときに」実行するという意味です。


$("#box1")

これは「id属性がbox1である要素を選択する」という意味です。


.css("background-color","#ff0")

これは「選択した要素のbackground-colorを#ff0にする」という意味です。


つまり「src属性がimg/01.gifであるimg要素がクリックされたときに、id属性がbox1である要素のbackground-colorを#ff0にする」という意味のJavaScriptとなります。

jQueryについて詳細はこちら。
http://ponk.jp/?p=1657
http://ascii.jp/elem/000/000/498/498710/

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる