クリックすると、色が変わるようにするには？？？

解決済

質問者：kaisoumemo
質問日時：2008/01/05 15:50
回答数：2件

～～～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は全然わかりませんが、教えてくれませんか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2008/01/05 16:43

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;
}
}