エレメントノードにはstyle属性もありますから、簡単な変更ならこれでもできます。しかし、あらかじめ classごとに見栄えを指定しておいて classの値を変化させる方が簡単で応用を広げることが出来ます。
次の文は虫の名前がclass="mushi"というクラスのspanに、虫の音がclass="koe"というクラスのspanに指定されています。あらかじめ koe は青緑色に指定されてます。mushiは特に設定はありません。
span.koe {color:#009999; font-weight:bold;}
span.medatsu1 {color:#ff0000;background:#ffcccc;}
span.medatsu2 {background:#ccffff;}
いろいろな虫がいます。特徴的ななき方をするものは聞き分けることは簡単です。ウマオイはスイッチョンとなきます。クツワムシは、歌に有名なようにガチャガチャと聞こえます。キリギリスもわかりやすくチョン・ギースと聞こえます。昼間になくので見つけやすいこともあるでしょう。
class="mushi"だけclass="medatsu1"に class="koe"だけclass="medatsu2"に
function changeclass1(){
var i;
var elms = document.getElementsByTagName("span");
for (i=0;elms.length>i;i++){
if (elms[i].getAttribute("class")=="mushi"){
elms[i].setAttribute("class","medatsu1");
}
}
}
function changeclass2(){
var i;
var elms = document.getElementsByTagName("span");
for (i=0;elms.length>i;i++){
if (elms[i].getAttribute("class")=="koe"){
elms[i].setAttribute("class","medatsu2");
//elms[i].className = "medatsu2";
}
}
}
span.koe にもともと設定されていた color:#009999 と font-weight:bold; がなくなってしまうことに注意してください。
ただしブラウザが読み込んだページに対しての書き換えで, もともとのファイルのデータを書き換えるわけではありません。
属性ノードの値を指定するとき、属性ノードがもともとあれば変更され, なければ新しく作られます。
下にある表はclass指定をまったくしていません。でも tr タグを数えて一つおきにclass属性を設定します。そのクラスに対してcssで背景色をつけるように設定してありますので、1行おきに色がついて見やすくなります。普通はページ表示と同時に実行するようにしますが、ここでは動作が分かるように手動で色をつけます。
1行おきにclass="medatsu2"を設定する
function trodd(){
var i;
var elms = document.getElementsByTagName("tr");
for (i=0;elms.length>i;i=i+2){
elms[i].setAttribute("class","medatsu2");
}
}
丸付数字はUTF-8で作るhtmlでは機種依存文字ではありません。メールではISO-2022-jpなので機種依存文字になります。
| 数値参照 | Unicode | UTF-8 | JISX0213 | 文字 | Name |
|---|---|---|---|---|---|
| ① | U+2460 | E291A0 | 3-2D21 | ① | CIRCLED DIGIT ONE |
| ② | U+2461 | E291A1 | 3-2D22 | ② | CIRCLED DIGIT TWO |
| ③ | U+2462 | E291A2 | 3-2D23 | ③ | CIRCLED DIGIT THREE |
| ④ | U+2463 | E291A3 | 3-2D24 | ④ | CIRCLED DIGIT FOUR |
| ⑤ | U+2464 | E291A4 | 3-2D25 | ⑤ | CIRCLED DIGIT FIVE |
| ⑥ | U+2465 | E291A5 | 3-2D26 | ⑥ | CIRCLED DIGIT SIX |
| ⑦ | U+2466 | E291A6 | 3-2D27 | ⑦ | CIRCLED DIGIT SEVEN |
| ⑧ | U+2467 | E291A7 | 3-2D28 | ⑧ | CIRCLED DIGIT EIGHT |
| ⑨ | U+2468 | E291A8 | 3-2D29 | ⑨ | CIRCLED DIGIT NINE |
| ⑩ | U+2469 | E291A9 | 3-2D2A | ⑩ | CIRCLED NUMBER TEN |
| ⑪ | U+246A | E291AA | 3-2D2B | ⑪ | CIRCLED NUMBER ELEVEN |
| ⑫ | U+246B | E291AB | 3-2D2C | ⑫ | CIRCLED NUMBER TWELVE |
| ⑬ | U+246C | E291AC | 3-2D2D | ⑬ | CIRCLED NUMBER THIRTEEN |
| ⑭ | U+246D | E291AD | 3-2D2E | ⑭ | CIRCLED NUMBER FOURTEEN |
| ⑮ | U+246E | E291AE | 3-2D2F | ⑮ | CIRCLED NUMBER FIFTEEN |
| ⑯ | U+246F | E291AF | 3-2D30 | ⑯ | CIRCLED NUMBER SIXTEEN |
| ⑰ | U+2470 | E291B0 | 3-2D31 | ⑰ | CIRCLED NUMBER SEVENTEEN |
| ⑱ | U+2471 | E291B1 | 3-2D32 | ⑱ | CIRCLED NUMBER EIGHTEEN |
| ⑲ | U+2472 | E291B2 | 3-2D33 | ⑲ | CIRCLED NUMBER NINETEEN |
| ⑳ | U+2473 | E291B3 | 3-2D34 | ⑳ | CIRCLED NUMBER TWENTY |
| ㉑ | U+3251 | E38991 | 3-2841 | ㉑ | CIRCLED NUMBER TWENTY ONE |
| ㉒ | U+3252 | E38992 | 3-2842 | ㉒ | CIRCLED NUMBER TWENTY TWO |
| ㉓ | U+3253 | E38993 | 3-2843 | ㉓ | CIRCLED NUMBER TWENTY THREE |
| ㉔ | U+3254 | E38994 | 3-2844 | ㉔ | CIRCLED NUMBER TWENTY FOUR |
| ㉕ | U+3255 | E38995 | 3-2845 | ㉕ | CIRCLED NUMBER TWENTY FIVE |
| ㉖ | U+3256 | E38996 | 3-2846 | ㉖ | CIRCLED NUMBER TWENTY SIX |
| ㉗ | U+3257 | E38997 | 3-2847 | ㉗ | CIRCLED NUMBER TWENTY SEVEN |
| ㉘ | U+3258 | E38998 | 3-2848 | ㉘ | CIRCLED NUMBER TWENTY EIGHT |
| ㉙ | U+3259 | E38999 | 3-2849 | ㉙ | CIRCLED NUMBER TWENTY NINE |
| ㉚ | U+325A | E3899A | 3-284A | ㉚ | CIRCLED NUMBER THIRTY |
| ㉛ | U+325B | E3899B | 3-284B | ㉛ | CIRCLED NUMBER THIRTY ONE |
| ㉜ | U+325C | E3899C | 3-284C | ㉜ | CIRCLED NUMBER THIRTY TWO |
| ㉝ | U+325D | E3899D | 3-284D | ㉝ | CIRCLED NUMBER THIRTY THREE |
| ㉞ | U+325E | E3899E | 3-284E | ㉞ | CIRCLED NUMBER THIRTY FOUR |
| ㉟ | U+325F | E3899F | 3-284F | ㉟ | CIRCLED NUMBER THIRTY FIVE |
| ㊱ | U+32B1 | E38AB1 | 3-2850 | ㊱ | CIRCLED NUMBER THIRTY SIX |
| ㊲ | U+32B2 | E38AB2 | 3-2851 | ㊲ | CIRCLED NUMBER THIRTY SEVEN |
| ㊳ | U+32B3 | E38AB3 | 3-2852 | ㊳ | CIRCLED NUMBER THIRTY EIGHT |
| ㊴ | U+32B4 | E38AB4 | 3-2853 | ㊴ | CIRCLED NUMBER THIRTY NINE |
| ㊵ | U+32B5 | E38AB5 | 3-2854 | ㊵ | CIRCLED NUMBER FORTY |
| ㊶ | U+32B6 | E38AB6 | 3-2855 | ㊶ | CIRCLED NUMBER FORTY ONE |
| ㊷ | U+32B7 | E38AB7 | 3-2856 | ㊷ | CIRCLED NUMBER FORTY TWO |
| ㊸ | U+32B8 | E38AB8 | 3-2857 | ㊸ | CIRCLED NUMBER FORTY THREE |
| ㊹ | U+32B9 | E38AB9 | 3-2858 | ㊹ | CIRCLED NUMBER FORTY FOUR |
| ㊺ | U+32BA | E38ABA | 3-2859 | ㊺ | CIRCLED NUMBER FORTY FIVE |
| ㊻ | U+32BB | E38ABB | 3-285A | ㊻ | CIRCLED NUMBER FORTY SIX |
| ㊼ | U+32BC | E38ABC | 3-285B | ㊼ | CIRCLED NUMBER FORTY SEVEN |
| ㊽ | U+32BD | E38ABD | 3-285C | ㊽ | CIRCLED NUMBER FORTY EIGHT |
| ㊾ | U+32BE | E38ABE | 3-285D | ㊾ | CIRCLED NUMBER FORTY NINE |
| ㊿ | U+32BF | E38ABF | 3-285E | ㊿ | CIRCLED NUMBER FIFTY |
ボタンをクリックまたはマウスが重なることで、classの値が変化して文字の色や背景色など見栄えが変化する仕組みのあるページをつくりなさい。
index.htmlからは「classの変化」という名前のリンクから行けるようにすること。
理解できない場合は、DOMの課題に共通の作成例を参考にしなさい。