zoukankan      html  css  js  c++  java
  • 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;
        100px;
        height:50px;
    
    }
  • 相关阅读:
    js简单排序
    js希尔排序
    js直接插入排序
    大数运算
    IOC和AOP的理解 (持续更新)
    频发事件的缓存技巧
    执行上下文深入解析(Execution Context)
    二分
    HDU 3790 最短路径问题 (双重权值)
    浅谈Targan算法
  • 原文地址:https://www.cnblogs.com/big-lll/p/6666368.html
Copyright © 2011-2022 走看看