これまで src の値を変更して画像を置き換えることをやってきましたが、この値を読み取ることもできます。
getElementByIdなどで得たエレメントノードに対して使用します。
document.getElementById("area01").getAttribute("src");
上の例では、このページ(document)のなかで,Idが(ById) area01 であるようなエレメント(Element)を見つけ(get),その中の src という属性の値を得ます。
次の様に変数を介して調べる場合もあります。
var elm = document.getElementById("area01"); elm.getAttribute("src");
上記の例では値を得ますが、表示されるわけでもなく、これだけでは何も変化はありません。
var a = elem.src; はできる?
エレメントノードの取得(ByID)の例と同じものです。クリックされたボタンの数字の画像が黄色い丸(images/yellow.png)にになります。ボタンに対応した id の要素を探して、その src を書き換えています
1 2 3 4 5 6 7 8 Clear
違うのはここからです。src属性を読み取って黄色い丸(images/yellow.png)になっているものだけを、赤い丸(images/red.png)に書き換えます。
黄色だけ赤に
function yellow2red(){ var i; var elm; for (i=1;9>i;i++){ elm = document.getElementById("n"+i); if (elm.getAttribute("src")=="images/yellow.png"){ elm.src="images/red.png"; } } }
class="even" となっているものの画像を替えます。
class="even"だけ赤に
function changeeven(){ var i; var elms = document.getElementsByTagName("img"); for (i=0;elms.length>i;i++){ if (elms[i].getAttribute("class")=="even"){ elms[i].src="images/red.png"; } } }
画像の指定は次の様になっています。
<p> <img src="images/n1.png" alt="" class="odd"> <img src="images/n2.png" alt="" class="even"> <img src="images/n3.png" alt="" class="odd"> <img src="images/n4.png" alt="" class="even"> <img src="images/n5.png" alt="" class="odd"> <img src="images/n6.png" alt="" class="even"> <img src="images/n7.png" alt="" class="odd"> <img src="images/n8.png" alt="" class="even"> </p>
ボタンの部分です。
<p class="btn"><span onclick="changeeven()">class="even"だけ赤に</span></p>
ボタンをクリックすると画像の要素のclassを読みとって、class="even" のところだけ別の画像にする仕組みのあるページをつくりなさい。
index.htmlからは「属性」という名前のリンクから行けるようにすること。
理解できない場合は、DOMの課題に共通の作成例を参考にしなさい。