做一个变色的标签

鼠标移入变为灰色，移除变回原来的颜色，点击变成黑色，再点击变回，如果变成黑色不受移入移除影响。

  1. <body>
  2.     <div  class="bt1" id="id1"  style="background-color:red"></div>
  3.     <div  class="bt1" id="id2"  style="background-color:yellow"></div>
  4.     <div  class="bt1" id="id3"  style="background-color:blue" ></div>
  5.     <div  class="bt1" id="id4"  style="background-color:green"></div>
  6.     <div  class="bt1" id="id5"  style="background-color:#FF00FF"></div>
  7.  
  8. </body>
  9. </html>
  10. <script type="text/javascript">
  11.  
  12.     var a = document.getElementsByClassName('bt1');//抓取class
  13.     for (var i = ; i < a.length; i++) {           //枚举
  14.         a[i].index = i;                            //给每个元素记上一个i值
  15.         a[i].onmouseover = function () {           // 鼠标移入事件
  16.             if (this.style.backgroundColor != "black") {
  17.                 this.style.backgroundColor = "#8B7E66"
  18.             }
  19.         }
  20.         a[i].onmouseout = function () {            //a鼠标移除事件
  21.             if(this.index ==  && this.style.backgroundColor != "black" )
  22.                 this.style.backgroundColor = "red";
  23.             if (this.index ==  && this.style.backgroundColor != "black")
  24.                 this.style.backgroundColor = "yellow";
  25.             if (this.index ==  && this.style.backgroundColor != "black")
  26.                 this.style.backgroundColor = "blue";
  27.             if (this.index ==  && this.style.backgroundColor != "black")
  28.                 this.style.backgroundColor = "green";
  29.             if (this.index ==  && this.style.backgroundColor != "black")
  30.                 this.style.backgroundColor = "#FF00FF";
  31.         }
  32.         a[i].onclick = function () {     //点击事件
  33.             if (this.style.backgroundColor == "black") {
  34.                 if (this.index == )
  35.                     this.style.backgroundColor = "red";
  36.                 if (this.index == )
  37.                     this.style.backgroundColor = "yellow";
  38.                 if (this.index == )
  39.                     this.style.backgroundColor = "blue";
  40.                 if (this.index == )
  41.                     this.style.backgroundColor = "green";
  42.                 if (this.index == )
  43.                     this.style.backgroundColor = "#FF00FF";
  44.             }
  45.             else if(this.style.backgroundColor != "black"){
  46.                 //this.style.backgroundColor = color(this.index);
  47.                 for (var j = ; j < a.length; j++) {
  48.  
  49.                     if (a[j].index == )
  50.                         a[j].style.backgroundColor = "red";
  51.                     if (a[j].index == )
  52.                         a[j].style.backgroundColor = "yellow";
  53.                     if (a[j].index == )
  54.                         a[j].style.backgroundColor = "blue";
  55.                     if (a[j].index == )
  56.                         a[j].style.backgroundColor = "green";
  57.                     if (a[j].index == )
  58.                         a[j].style.backgroundColor = "#FF00FF";
  59.                 }
  60.                 this.style.backgroundColor = "black";
  61.             }
  62.         }
  63.     }
  64. </script>

外联样式表

  1. .bt1 {
  2.     float:left;
  3.     width:100px;
  4.     height:50px;
  5.  
  6. }

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

  1. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  2. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  3. JS——控制标记的样式

    1.定义一个div,宽度为100px,高度为100px,背景色为粉色. 定义一个事件,鼠标移入时背景色变为蓝色,宽度变为200px. 定义一个事件,鼠标移出时背景色变为红色. html文件: < ...

  4. js控制style样式

    1.行内样式获取打印出来 2.内嵌和外链的获取不了 <div style="width:200px;height:200px; background: red;">&l ...

  5. vue中通过js控制页面样式方法

    在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

  6. Vue.js 控制css样式

    <script src="https://unpkg.com/vue/dist/vue.js"></script> <style type=" ...

  7. JS控制菜单样式切换

    $('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href ...

  8. js控制不同的时间段显示不同的css样式

    js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){        datetoday ...

  9. 内联样式自动出现，一般是js控制写入的

    内联样式自动出现,一般是js控制写入的

随机推荐

  1. [软件工程基础]团队作业Week3

    团队介绍 团队名:弗朗明哥舞步 团队角色 开发:杨艺媛,易子沐,赵晓宇,夏欣怡 测试:张华杰 PM:刘斯盾 刘斯盾 我是刘斯盾,喜欢编程,喜欢运动!很高兴和大家一起开发这个项目! 杨艺媛 我叫杨艺媛, ...

  2. Django 基础 视图系统

    Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  3. hdoj-3791-二叉搜索树(二叉搜索树模板题)

    #include <cstring> #include <cstdio> #include <iostream> using namespace std; type ...

  4. github提交代码时遇到”Everything up-to-date“问题的解决方式

    需要创建一个新分支,将最新代码加入新分支, 再将新分支合并到主分支,然后提交主分支代码到github网站. ---------------------------------------------- ...

  5. 不带缓存IO和标准(带缓存)IO

    linux对IO文件的操作分为: 不带缓存:open read.posix标准,在用户空间没有缓冲,在内核空间还是进行了缓存的.数据-----内核缓存区----磁盘 假设内核缓存区长度为100字节,你 ...

  6. stl_hash_map.h

    stl_hash_map.h // Filename: stl_hash_map.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: ...

  7. Zeroc Ice 负载均衡之Icegrid simple

    最近学习Icestorm的replicated例子,在本地计算机上面跑通了,但在两台机器上(一台服务器192.168.0.113,一台客户端192.168.0.188),怎么都跑不通.上网求助,大家给 ...

  8. CodeForces - 961D：Pair Of Lines （几何，问两条直线是否可以覆盖所有点）

    You are given n points on Cartesian plane. Every point is a lattice point (i. e. both of its coordin ...

  9. Unity3D的SystemInfo类，用于获取运行设备硬件信息（CPU、显卡、类型等）

    SystemInfo类中的静态变量:   中文显示: Rendering.CopyTextureSupport copyTextureSupport:(只读)支持多种复制纹理功能的情况. string ...

  10. FastAdmin 中的 formatter flag 分析

    FastAdmin 中的 formatter flag 分析 效果 首先看看效果,这里的文字和颜色可以根据数据改变. 这是系统自带的分类管理. 代码 功能在 \public\assets\js\bac ...