ここから本文です

onclickで同じクラス全ての背景を変更する方法

triangle_teaさん

2010/2/1823:45:13

onclickで同じクラス全ての背景を変更する方法

ごめんなさい、もう一度教えて下さい

onclickでクラスの背景を変更する記述として、

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

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


上記の記述でimgをクリックするとbox2の背景が#ff0になることを教えて頂き成功しました。

この場合は[0]なのでひとつめのclass="box2"しか色が変わりませんが、ページ内には10個のclass="box2"があり、
これら10BOXの色をimgワンクリックで同時に変更するにはどのように記載すれば宜しいでしょうか?

javascriptは少しだけ分かりますが、簡単なのでonclick="~の記述のみで記述したいのですが無理でしょうか?


似た質問になりますが、どうか宜しくお願い致します。

閲覧数:
1,707
回答数:
1

違反報告

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

プロフィール画像

カテゴリマスター

sii_sideさん

2010/2/1900:45:59

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

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

<img alt="push" onclick="
var b2 = document.getElementsByClassName('box2');
for(var i = 0, j = b2.length; i < j; i++) {
b2[i].style.backgroundColor = '#ff0';
}">

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

このように、取得した要素の集合から1つ1つの要素をfor文で繰り返して見ていって、1つずつstyleを変えるという方法を採ることになります。

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

2010/2/19 14:35:29

降参 度々ご親切にありがとうございます。できました♪
forの使い方少し分かってきました。

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

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

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

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

閉じる

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