做一个变色的标签

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

<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. 【微信小程序+ES6新特性应用】字符串模板：美元符号$+大括号{}变量的写法

    1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...

  2. 2017.11.28 Enginering management：problem-solving ability

    Today,my colleague is on bussiness trip. going to customer factory in jiangxi. slove the color diffe ...

  3. Uva1401(字典树)

    1401 - Remember the Word Time limit: 3.000 seconds Neal is very curious about combinatorial problems ...

  4. Jmeter基本组件

    学习jmeter首先配置环境,使工具运行起来,然后需要了解该工具大致的内容,以下是写的Jmeter基本组件 1.添加线程组:右键点击“测试计划”-->“添加”-->“Threads(Use ...

  5. VMware12版虚拟机怎么安装win7系统（详细教程

    转自:http://jingyan.baidu.com/article/cd4c29791fcf1b756e6e6034.html VMware12版虚拟机怎么安装win7系统(详细教程) 现 在很多 ...

  6. [转] AS3地图拼接与战争迷雾的实现

    在开发游戏的过程中,特别是地图编辑器中,需要利用最少的资源,实现最丰富的地形地貌.虽然现在众多的RPG开始使用整图,但是我们偶尔还是需要能够让玩家自己编辑地图,或者其他需要自动进行地图构建的功能.另外 ...

  7. docker容器的服务发现：consul

    官网:https://www.consul.io 官网文档:https://www.consul.io/docs简介 consul是一个服务发现的组件,在docker世界中他比较流行,主要是consu ...

  8. CF 732F Tourist Reform——v-SCC+dfs

    题目:http://codeforces.com/contest/732/problem/F 给无向图定向使得从每个点出发能去的点数最小值最大. SCC.点内部dfs定向.点间以siz最大的为起点反向 ...

  9. Gradle的快速入门

    1.基础知识: Gradle提供了:构建项目的框架.但是其中起作用的是Plugin. Gradle在默认情况下提供了很多常用的Plugin.例如:构建Java的Plugin.还有war.Ear等. G ...

  10. touch: cannot touch '/usr/local/tomcat/logs/catalina.out': Permission denied解决方法

    一.报以下错误: ./startup.sh Using CATALINA_BASE: /usr/local/tomcat702 Using CATALINA_HOME: /usr/local/tomc ...