- ベストアンサー
クリックすると、色が変わるようにするには？？？
～～～HTML～～～ <div class="01-01"> 123 </div> <div class="02-01"> 123 </div> ○○○○←ここにボタン ～～～CSS～～～ .01-01{ border:1px solid #298cef; width: 950px; height: 200px; padding: 0px 0px 0px 0px; } .02-01{ border:1px solid #298cef; width: 950px; height: 200px; padding: 0px 0px 0px 0px; } このようにしてスタイルシートでテーブルを作っているのですが、 ボタンを１回クリックすると、「01-01」と「02-01」のbordercolorを変更するようにしたいのですが、どうすればよいのでしょうか？ 簡単にいうと、新Yahoo!Japanの色変えのように。 javascriptは全然わかりませんが、教えてくれませんか？
- kaisoumemo
- お礼率4% (3/71)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
idと違ってclassは複数のオブジェクトを指定できる分ちょっと面倒。 その前に・・・ 一応classは文字規制がないことになっていますが、 数字から始まるようなものは避けた方がよいです。 こんかいはとりあえず頭にcをつけときました。 やり方としては、クラスごとごっそり替えてしまうやり方と クラスのスタイルのborder-colorをいじるやり方があるでしょう。 いかを参考にしてください。 //test.htm <head> <link rel="stylesheet" type="text/css" href="test.css"> <script type="text/javascript" src="test.js"></script> </head> <body> <div class="c01-01"> 123 </div> <div class="c02-01"> 123 </div> <input type="button" value="c01-01をc01-02に" onClick="changeClassName('c01-01','c01-02')"> <input type="button" value="c01-01の色を青に" onClick="changeBorderColor('c01-01','#0000ff')"> </body> //test.css .c01-01{ border:1px solid #298cef; width: 950px; height: 200px; padding: 0px 0px 0px 0px; } .c01-02{ border:1px solid #ff0000; width: 950px; height: 200px; padding: 0px 0px 0px 0px; } .c02-01{ border:1px solid #298cef; width: 950px; height: 200px; padding: 0px 0px 0px 0px; } //test.js function changeClassName(cn1,cn2){ var tags=document.getElementsByTagName('*'); for(var i=0;i<tags.length;i++){ if(tags[i].className==cn1) tags[i].className=cn2; } } function changeBorderColor(cn,color){ var tags=document.getElementsByTagName('*'); for(var i=0;i<tags.length;i++){ if(tags[i].className==cn) tags[i].style.borderColor=color; } }
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
