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控制写入的
随机推荐
- fasttext和cnn的比较，使用keras imdb看效果——cnn要慢10倍。
fasttext: '''This example demonstrates the use of fasttext for text classification Based on Joulin e ...
- java快捷键大全
存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+(Eclipse3已经都合并到Ctrl+/了) 代码辅助 Alt+/ 快速修复 Ctrl+1 代码格式化 Ctrl+Shif ...
- Javascript-- jQuery Ajax应用
使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ...
- Android源代码因删除所有git仓库导致的编译错误
/******************************************************************************** * Android源代码因删除所有g ...
- UVA 11605 Lights inside a 3d Grid
#include <iostream> #include <stdio.h> #include <cstring> #include <math.h> ...
- 非maven项目下载maven的jar
很多时候我们需要jar,可惜项目不是maven的,但是我们只有一个maven的坐标,那怎么办? 比如: <dependencies> <dependency> <grou ...
- CAS单点登录系统简介
一.cas简介 全名:Central Authentication Service特点: 1.开源的.多协议的 SSO 解决方案: Protocols : Custom Protocol . CAS ...
- Qt中int转换成QString
(1) QString QString::number ( long n, int base = 10 ) [static] examle: long a = 48; QString s = QStr ...
- Qt Creator 中自动补全的快捷键描述
在TextEdit中的completeThis
- Excel合并计算
office版本为2013,数据来源:我要自学网,曾贤志老师 计算之前,光标定在空白位置,不要定在数据源. 将汇总的类型居于首列(不可以跨区域选择,可以把不需要汇总的移动到其他列). 要有删除原来数据 ...