做一个变色的标签

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

<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. poj 1300 欧拉图

    http://poj.org/problem?id=1300 要不是书上有翻译我估计要卡死,,,首先这是一个连通图,鬼知道是那句话表示出来的,终点必须是0,统计一下每个点的度数,如果是欧拉回路那么起点 ...

  2. hive从查询中获取数据插入到表或动态分区

    Hive的insert语句能够从查询语句中获取数据,并同时将数据Load到目标表中.现在假定有一个已有数据的表staged_employees(雇员信息全量表),所属国家cnty和所属州st是该表的两 ...

  3. MySQL 索引 视图 触发器 存储过程 函数

    1.索引 索引相当于图书的目录,可以帮助用户快速的找到需要的内容. 数据库利用各种各样的快速定位技术,能够大大提高查询效率.特别是当数据量非常大,查询涉及多个表时,使用索引往往能使查询速度加快成千上万 ...

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

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

  5. [Luogu3674]小清新人渣的本愿

    luogu 题意 给你一个序列a,长度为n,有m次操作,每次询问一个区间是否可以选出两个数它们的差为x,或者询问一个区间是否可以选出两个数它们的和为x,或者询问一个区间是否可以选出两个数它们的乘积为x ...

  6. LeetCode Find Mode in Binary Search Tree

    原题链接在这里:https://leetcode.com/problems/find-mode-in-binary-search-tree/#/description 题目: Given a bina ...

  7. BZOJ3170：[TJOI2013]松鼠聚会

    题目传送门:https://lydsy.com/JudgeOnline/problem.php?id=3170 通过分析可以发现,题目所说的两点之间的距离就是切比雪夫距离. 两点之间欧几里得距离:\( ...

  8. MySQL 5.6 date 与 string 的转换和比较

    我们有张表,表中有一个字段 dpt_date ,SQL 类型为 date,表示离开日期. 我们将 dpt_date 与字符串 ‘2016-03-09’ 进行比较,发现效率低于 dpt_date 转换为 ...

  9. 机器学习：逻辑回归（OvR 与 OvO）

    一.基础理解 问题:逻辑回归算法是用回归的方式解决分类的问题,而且只可以解决二分类问题: 方案:可以通过改造,使得逻辑回归算法可以解决多分类问题: 改造方法: OvR(One vs Rest),一对剩 ...

  10. java代码swing编程 制作一个单选按钮的Frame

    不善于思考,结果费了时间,也没有效果 下面的框框可以做出来. package com.kk; import javax.swing.JFrame; import javax.swing.JLabel; ...