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控制写入的

随机推荐

Multiprovide 实践理解
“多重提供器”是一种“信息提供者”,它综合了多个“信息提供者”的数据以用于报告.“多重提供者”本身不包含任何数据.“多重提供者”的数据由所基于的“信息提供者”专门提供,这些“信息提供者”组合在一起进行 ...
AutoCAD2014的安装与激活
1.安装包与激活文件的下载链接:https://pan.baidu.com/s/1I2-x9T__sQAgtvjkOyc_1Q 密码:5pd1 2.CAD的安装此过程没什么特殊要求,安装时随便输入 ...
centos type.h 编译错误问题
# ifndef __int8_t_defined # define __int8_t_defined __intN_t (, __QI__); __intN_t (, __HI__); __intN ...
weinre
https://www.cnblogs.com/diva/p/3995674.html
PHP数据结构之实现栈
接着前面PHP数据结构来学习,今天写的是实现栈. <?php class stack //定义一个栈的类 { private $size; //栈的空间大小 private $top; // 栈 ...
mysql 多表查询左联去重方法
1.数据库中的两张表: 2.传统左联查询数据结果如下: 3.替换查询语句可得到去重数据结果:
nginx与二级域名的绑定 nginx安装
nginx中文文档 http://www.nginx.cn/doc/ nginx 查看配置文件地址 http://blog.csdn.net/ljfrocky/article/details/5052 ...
Linux网络编程——tcp并发服务器（poll实现）
想详细彻底地了解poll或看懂下面的代码请参考<Linux网络编程——I/O复用之poll函数> 代码: #include <string.h> #include <st ...
32位模式下C/C++程序可用最大内存
关于32位程序申请大内存问题(1.6G). 我在win7 64系统上面测试Visual studio 10 int* Test=new int[1024*1024*200]; int* Test2=n ...
最小LINUX系统下U盘的挂载及卸载
U盘挂载命令U盘插入的时候会显示启动信息,启动信息中sda: sda1指U盘的设备名为sda1dev设备目录下有一个sda1设备文件,此设备文件就是我们插入的U盘,我们将这个设备文件挂载到Linux系 ...

js 控制标记样式

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

随机推荐

热门专题