- ベストアンサー
同じIDのスタイルをまとめて変更したい
JavaScriptでスタイルを変更しようと思ったのですが、なかなかうまくいきません。 <html> <head> <script language="JavaScript"> function change(obj) { document.getElementById(obj).style.color="#ff0000"; } </script> </head> <body> <div id="a">要素A</div> <div id="b">要素B</div> <div id="a">要素A</div> <input type="button" value="変更" onClick="change('a')"> </body> </html> 変更ボタンを押すとIDが"a"のフォントカラーが赤色になるはず、と思ったのですが、これだと1段目の「要素A」だけが赤色になり、3段目の「要素A」に変化がありません。getElementById()メソッドは上から1番目のIDしか参照しないのでしょうか。どうすれば1段目と3段目の両方のフォントカラーを変更できるでしょうか。
- kamineco
- お礼率96% (105/109)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そもそもIdというものはオブジェクトにユニーク振らなければならず、同じIdが存在する設計はしてはいけないらしいです。 getElementByIdというものは、Idがユニークであるという位置づけからgetElement（単数形）なのです。 似たような存在でnameプロパティがありますが、これは重複してもよいと定義されています。 getElementsByNameというものは、重複が許されるnameよりオブジェクトを取得するので、getElements（複数形）なのです。 そしてこのgetElementsByNameは帰り値として、Elementのリストを返します。 （例） <input type="text" name="textA" value="aaa"> <input type="text" name="textA" value="bbb"> をElementsList = getElementsByName("textA").valueとすると、帰り値は ElementsList = ("aaa", "bbb")となっています。 これをふまえて、ソースを修正すると、 <html> <head> <script language="JavaScript"> function change(obj) { ElementsList = document.getElementByName(obj); for (i = 0; i < ElementsList.length; i++) { ElementsList[i].style.color="#ff0000"; } </script> </head> <body> <div><a name="a">要素A</a></div> <div><a name="b">要素B</a></div> <div><a name="a">要素A</a></div> <input type="button" value="変更" onClick="change('a')"> </body> </html> となります。 （※） divタグにはnameプロパティを振れませんので、アンカータグを間に挟みました。
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ＩＥ限定で良ければ、 function change(obj) { var IDs=document.all(obj); for(var i=0;i<IDs.length;i++) IDs[i].style.color="#ff0000"; } の様に書けますが ＩＥ限定にしないならIDを複数に振るのは止めましょう。 最近同じような質問があったので、 参考ＵＲＬが参考になると思います。
お礼
たしかに、一つしかないからIDって言うんですよね。 ソースも付けていただいてどうもありがとうございました。
お礼
getElementByName()メソッドは同じname属性を持つElementを配列で返すんですね。ただdivタグにname属性を付けられないのが残念です。getElementsByClass()っていうのはないんですよね。親切なご回答どうもありがとうございました。