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 = ; 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 控制标记样式的更多相关文章

js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
JS——控制标记的样式
1.定义一个div,宽度为100px,高度为100px,背景色为粉色. 定义一个事件,鼠标移入时背景色变为蓝色,宽度变为200px. 定义一个事件,鼠标移出时背景色变为红色. html文件: < ...
js控制style样式
1.行内样式获取打印出来 2.内嵌和外链的获取不了 <div style="width:200px;height:200px; background: red;">&l ...
vue中通过js控制页面样式方法
在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...
Vue.js 控制css样式
<script src="https://unpkg.com/vue/dist/vue.js"></script> <style type=" ...
JS控制菜单样式切换
$('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href ...
js控制不同的时间段显示不同的css样式
js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){ datetoday ...
内联样式自动出现，一般是js控制写入的
内联样式自动出现,一般是js控制写入的

随机推荐

nginx默认语法
vi /etc/nginx/nginx.conf user 设置nginx服务的系统使用用户worker_processes 工作进程数error_log nginx的错误日志pid nginx服务启 ...
Java_数据交换_Jackson_用法入门
一.用法二.参考资料 1.官方 1.Java下利用Jackson进行JSON解析和序列化 2.
MySQL for Mac在Mac终端导入导出.sql文件
https://www.cnblogs.com/code4app/p/6222310.html 1.导入打开终端输入:(前提是已经配置过MySQL环境变量) mysql -u root -p cre ...
golang的项目结构相关知识
### 项目结构 ``` ├── bin │ ├── login │ └── main ├── pkg │ └── darwin_amd64 │ └── login │ └── a ...
switch case 语法
switch (条件){ case 第一种: 执行语句 break: case 第二种情况: 执行语句 break: default: 执行语句: break: }
onclick调用函数的几种!
()是个操作,表示执行displayDate方法,你把displayDate方法执行完的返回值赋给onclick能对吗?onclick接受的是Function类型的变量,要么用匿名的方法赋值就是doc ...
ZOJ2314 Reactor Cooling（有上下界的网络流）
The terrorist group leaded by a well known international terrorist Ben Bladen is buliding a nuclear ...
C# Message 消息处理
一.消息概述 Windows下应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎,我们需要理解掌握我们使用的编程语言是如何封装消息的原理.C#自定义消息通信往往采用事件驱动的方式实现,但有时 ...
难道调用ThreadPool.QueueUserWorkItem（）的时候，真是必须调用Thread.Sleep（N）吗？
开门见山,下面的例子中通过调用ThreadPool.QueueUserWorkItem(WaitCallback callBack, object state)的方式实现异步调用: 1: class ...
dockerfile mysql
FROM centos6.6-mysql5.5:0.0.4 MAINTAINER syberos:wangmo RUN mv /etc/my.cnf /etc/my.cnf.bak ADD my.cn ...

js 控制标记样式

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

随机推荐

热门专题