做一个变色的标签

鼠标移入变为灰色，移除变回原来的颜色，点击变成黑色，再点击变回，如果变成黑色不受移入移除影响。

<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 = ; 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 ==  && this.style.backgroundColor != "black" )

                this.style.backgroundColor = "red";

            if (this.index ==  && this.style.backgroundColor != "black")

                this.style.backgroundColor = "yellow";

            if (this.index ==  && this.style.backgroundColor != "black")

                this.style.backgroundColor = "blue";

            if (this.index ==  && this.style.backgroundColor != "black")

                this.style.backgroundColor = "green";

            if (this.index ==  && this.style.backgroundColor != "black")

                this.style.backgroundColor = "#FF00FF";

        }

        a[i].onclick = function () {     //点击事件

            if (this.style.backgroundColor == "black") {

                if (this.index == )

                    this.style.backgroundColor = "red";

                if (this.index == )

                    this.style.backgroundColor = "yellow";

                if (this.index == )

                    this.style.backgroundColor = "blue";

                if (this.index == )

                    this.style.backgroundColor = "green";

                if (this.index == )

                    this.style.backgroundColor = "#FF00FF";

            }

            else if(this.style.backgroundColor != "black"){

                //this.style.backgroundColor = color(this.index);

                for (var j = ; j < a.length; j++) {

                    if (a[j].index == )

                        a[j].style.backgroundColor = "red";

                    if (a[j].index == )

                        a[j].style.backgroundColor = "yellow";

                    if (a[j].index == )

                        a[j].style.backgroundColor = "blue";

                    if (a[j].index == )

                        a[j].style.backgroundColor = "green";

                    if (a[j].index == )

                        a[j].style.backgroundColor = "#FF00FF";

                }

                this.style.backgroundColor = "black";

            }

        }

    }

</script>

外联样式表

.bt1 {

    float:left;

    width:100px;

    height:50px;

}

js 控制标记样式的更多相关文章

  1. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  2. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  3. JS——控制标记的样式

    1.定义一个div,宽度为100px,高度为100px,背景色为粉色. 定义一个事件,鼠标移入时背景色变为蓝色,宽度变为200px. 定义一个事件,鼠标移出时背景色变为红色. html文件: < ...

  4. js控制style样式

    1.行内样式获取打印出来 2.内嵌和外链的获取不了 <div style="width:200px;height:200px; background: red;">&l ...

  5. vue中通过js控制页面样式方法

    在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

  6. Vue.js 控制css样式

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <style type=" ...

  7. JS控制菜单样式切换

    $('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href ...

  8. js控制不同的时间段显示不同的css样式

    js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){        datetoday ...

  9. 内联样式自动出现，一般是js控制写入的

    内联样式自动出现,一般是js控制写入的

随机推荐

  1. 51nod 1686 二分+离散化

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1686 1686 第K大区间 基准时间限制:1 秒 空间限制:131072 ...

  2. LeetCode OJ：Subsets（子集）

    Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset must ...

  3. 魔法效果——dijkstra+堆（邻接表存储）

    dijkstra本身每次要for一遍,才能找出最小的节点,但用了堆之后,直接取出堆首就可以了. 但要注意的一点是,c++自带的stl里的priority_queue本身是先入大出的,而我们要求的是最小 ...

  4. uva1152 - 4 Values whose Sum is 0（枚举，中途相遇法）

    用中途相遇法的思想来解题.分别枚举两边,和直接暴力枚举四个数组比可以降低时间复杂度. 这里用到一个很实用的技巧: 求长度为n的有序数组a中的数k的个数num? num=upper_bound(a,a+ ...

  5. CI框架后台添加左侧导航栏出现的一系列问题

  6. CodeForces - 154C：Double Profiles （hash+排序）

    You have been offered a job in a company developing a large social network. Your first task is conne ...

  7. Catch That Cow（广搜）

    个人心得:其实有关搜素或者地图啥的都可以用广搜,但要注意标志物不然会变得很复杂,想这题,忘记了标志,结果内存超时: 将每个动作扔入队列,但要注意如何更简便,更节省时间,空间 Farmer John h ...

  8. LeetCode Range Addition II

    原题链接在这里:https://leetcode.com/problems/range-addition-ii/description/ 题目: Given an m * n matrix M ini ...

  9. get方法传递中文数据的时候如何进行转码

    首先,如果是在js端的代码,用window.href进行请求时,需要进行转码 前台jsp中: var param = document.getElementById('param').value;pa ...

  10. binlog之三：binlog开启、查看

    0.开启二进制日志记录功能:        #vim /etc/my.cnf            [mysqld]            log_bin=mysql-bin            b ...