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;

}

 

posted @ 2017-04-04 20:39  超级芒果  阅读(303)  评论(0)    收藏  举报