js 控制标记样式
做一个变色的标签
鼠标移入变为灰色，移除变回原来的颜色，点击变成黑色，再点击变回，如果变成黑色不受移入移除影响。
<body>
<div class="bt1" id="id1" style="background-color:red"></div>
<div class="bt1" id="id2" style="background-color:yellow"></div>
<div class="bt1" id="id3" style="background-color:blue" ></div>
<div class="bt1" id="id4" style="background-color:green"></div>
<div class="bt1" id="id5" style="background-color:#FF00FF"></div>
</body>
</html>
<script type="text/javascript">
var a = document.getElementsByClassName('bt1');//抓取class
for (var i = 0; i < a.length; i++) { //枚举
a[i].index = i; //给每个元素记上一个i值
a[i].onmouseover = function () { // 鼠标移入事件
if (this.style.backgroundColor != "black") {
this.style.backgroundColor = "#8B7E66"
}
}
a[i].onmouseout = function () { //a鼠标移除事件
if(this.index == 0 && this.style.backgroundColor != "black" )
this.style.backgroundColor = "red";
if (this.index == 1 && this.style.backgroundColor != "black")
this.style.backgroundColor = "yellow";
if (this.index == 2 && this.style.backgroundColor != "black")
this.style.backgroundColor = "blue";
if (this.index == 3 && this.style.backgroundColor != "black")
this.style.backgroundColor = "green";
if (this.index == 4 && this.style.backgroundColor != "black")
this.style.backgroundColor = "#FF00FF";
}
a[i].onclick = function () { //点击事件
if (this.style.backgroundColor == "black") {
if (this.index == 0)
this.style.backgroundColor = "red";
if (this.index == 1)
this.style.backgroundColor = "yellow";
if (this.index == 2)
this.style.backgroundColor = "blue";
if (this.index == 3)
this.style.backgroundColor = "green";
if (this.index == 4)
this.style.backgroundColor = "#FF00FF";
}
else if(this.style.backgroundColor != "black"){
//this.style.backgroundColor = color(this.index);
for (var j = 0; j < a.length; j++) {
if (a[j].index == 0)
a[j].style.backgroundColor = "red";
if (a[j].index == 1)
a[j].style.backgroundColor = "yellow";
if (a[j].index == 2)
a[j].style.backgroundColor = "blue";
if (a[j].index == 3)
a[j].style.backgroundColor = "green";
if (a[j].index == 4)
a[j].style.backgroundColor = "#FF00FF";
}
this.style.backgroundColor = "black";
}
}
}
</script>
外联样式表
.bt1 { float:left; width:100px; height:50px; }
