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控制写入的
随机推荐
- 51nod 1428 贪心
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1428 1428 活动安排问题 基准时间限制:1 秒 空间限制:13107 ...
- JavaWeb学习总结（一）JavaWeb入门与Tomcat
一.常见软件系统体系结构B/S.C/S 1. C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端程序,例如我们安装的就是QQ的客户端程序: ...
- DECLARE_MESSAGE_MAP用法
DECLARE_MESSAGE_MAP( ) 说明: 你的程序中的每一个CCmdTarget的派生类都可以提供一个消息映射以处理消息.在你的类声明的末尾使用DECLARE_MESSAGE_MAP宏. ...
- 3.18 CCProgressTo 进度计时器
CCProgressTimer * pross = CCProgressTimer::create(CCSprite::create("Icon.png")); pross-> ...
- WPF之X名称空间学习
WPF的X名称空间都有什么呢?首先,盗用张图来说明: 我将就图表中的内容进行总结: 1.x:Array具有一个Iteams属性,它能暴漏一个ArratList实例,ArratList实例的内部成员类型 ...
- storm 学习教程
转自:http://blog.csdn.net/hrn1216/article/details/51538962 翻译太累了,再也不想去翻译了,真的太累了: 在这个教程中, 你将学到如何创建一个Sto ...
- 基于Python语言使用RabbitMQ消息队列（三）
发布/订阅 前面的教程中我们已经创建了一个工作队列.在一个工作队列背后的假设是每个任务恰好会传递给一个工人.在这一部分里我们会做一些完全不同的东西——我们会发送消息给多个消费者.这就是所谓的“发布/订 ...
- tp验证码
一.生成验证码 1.commonController.class.php class CommonController extends Controller{ public function getV ...
- python数据类型，int,str,bool
一,python中的int() int在python中主要用来运算,对字符串的转化,用int(str)表示,并且需要str.isdigit为真. 在int()中二进制的转换如下: #bit_lengt ...
- secret CRT 会话光标不闪烁问题
点击 选项->会话选项 然后在取消即可,就有了闪烁的光标,应该是个bug.