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控制写入的
随机推荐
- uva489（需要考虑周全）
这个题是简单题,但是我的思路本身不周全,忽略了一种比较“无理”的情况,而导致WA多次.我是把猜的串全扫一遍以后判断出结果,但是实际上可能是前面已经全猜对了,但是这个选手是个逗比,已经猜对了还要猜,而且 ...
- Mysql系列：高可用（HA)-keeplived
转自:晓叹星沉 https://my.oschina.net/blueSky4Java/blog/1572905 摘要: 随着项目的发展,为了提高程序的性能,数据库层面或多或少的会用到HA.读写分离. ...
- 1113. Integer Set Partition (25)
Given a set of N (> 1) positive integers, you are supposed to partition them into two disjoint se ...
- LeetCode Beautiful Arrangement
原题链接在这里:https://leetcode.com/problems/beautiful-arrangement/description/ 题目: Suppose you have N inte ...
- 【LeetCode】028. Implement strStr()
Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...
- webpack学习（一）—— 入门
,我们通常采用的是组件化开发方式,这样就会对应有很多个js文件,而打包工具的出现则是为了正确处理这些js文件的依赖关系,并生成一个最终的文件,这样,我们最后只需要加载打包以后的文件就可以了,而无须加载 ...
- verilog学习五点经验分享
1.规范很重要工作过的朋友肯定知道,公司里是很强调规范的,特别是对于大的设计(无论软件还是硬件),不按照规范走几乎是不可实现的.逻辑设计也是这样:如果不按规范做的话,过一个月后调试时发现有错,回头再看 ...
- Mybatis多参数查询映射
一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...
- 关于pipe管道的读写端关闭问题
知识概述 通过pipe在内核中创建一个文件,然后可以实现两个进程通信 管道是一种最基本的IPC机制,由 pipe 函数创建: #include <unistd.h> ]); 调用 pipe ...
- 2015.7.24 CAD库中列举五字代码点所属航路及终端区图，左连接的累加
select decode(fb.tupr,null,'仅航路',decode(fc.aw,null,'仅终端区','航路及终端区')) 范围,pt 五字代码点,fb.tupr 终端区图及程序,fc. ...