本文有：对某个事件的来回操作实现对css样式的来回修改 。比如实现hover效果

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #box{

                width: 200px;

                height: 200px;

                background-color: red;

            }

        </style>

    </head>

    <body>

        <div id="box">魔降风云变</div>

        <script type="text/javascript">

            // 1.获取事件源对象

            // var box = document.getElementById('box');

            // 2.绑定事件

            /* box.onmouseover = function (){

                // 3.让标签的背景色变绿

                box.style.backgroundColor = 'green';

                box.style.fontSize = '30px';

            }

            box.onmouseout = function (){

                // 3.让标签的背景色变绿

                box.style.backgroundColor = 'red';

                box.style.fontSize = '16px';

            } */

            // var isRed = true;

            // box.onclick = function(){

            //     if(isRed){

            //         this.style.backgroundColor = 'green';

            //         isRed = false;

            //     }else{

            //         this.style.backgroundColor = 'red';

            //         isRed = true;

            //     }

            // }

        </script>

    </body>

</html>

1、

1.1

没有js的时候

1.2

            // 1.获取事件源对象

            var box = document.getElementById('box');

            // 2.绑定事件

             box.onmouseover = function (){

                // 3.让标签的背景色变绿

                box.style.backgroundColor = 'green';

                box.style.fontSize = '30px';

            }

鼠标经过图，让图变绿，字体变大。使用js修改css样式

1）获取事件源，事件源就是要修改css的标签代码段；

2）绑定事件 对象.onmouseover =function(){} 匿名函数。

3）匿名函数中对象.样式.属性=‘新值’ ，修改颜色和字体。属性带-的去掉-并将-后第一个字母大写。驼峰体。

上面的改变就回不去了，只有刷新网页才能变回原来的样子。

1.3、两段代码js实现伪类选择器hover的效果

            // 1.获取事件源对象

            var box = document.getElementById('box');

            // 2.绑定事件

             box.onmouseover = function (){

                // 3.让标签的背景色变绿

                box.style.backgroundColor = 'green';

                box.style.fontSize = '30px';

            }

            box.onmouseout = function (){

                // 3.让标签的背景色变绿

                box.style.backgroundColor = 'red';

                box.style.fontSize = '16px';

            }

鼠标未覆盖

鼠标覆盖，能实现不断的切换了。

1.4、但是这里有代码冗余。修改一下，加个标志，

var box = document.getElementById('box');

            var isRed = true;

            box.onclick = function(){

                if(isRed){

                    this.style.backgroundColor = 'green';

                    isRed = false;

                }else{

                    this.style.backgroundColor = 'red';

                    isRed = true;

                }

            }

未点击：

点击。能实现每次点击实现颜色切换

js对样式的操作的更多相关文章

  1. 原生js 样式的操作整理

    内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.g ...

  2. 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

  3. js css样式操作代码（批量操作）

    js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...

  4. 从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  5. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  6. vue.js_03_vue.js的样式和修饰符

    1.vue.js的样式 <body> <div id="app"> <h1 :style="styleObj1">这是一个h ...

  7. JS获取样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  9. JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

    javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...

随机推荐

  1. [LeetCode] 199. Binary Tree Right Side View 二叉树的右侧视图

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  2. Bro-Sysmon：一款让Bro-IDS（Bro）监视Windows端点活动的工具

    Bro-Sysmon是啥? 受到了Bro-OSQuery(https://github.com/bro/bro-osquery)项目的启发,为了使Bro-IDS(Bro)监视Windows端点活动所以 ...

  3. oracle 常用命令【创建表空间用户及删除】

    /*第1步:创建临时表空间 */ create temporary tablespace ZJY_TEMP tempfile '/usr/u01/app/oradata/orcl/ZJY_TEMP.d ...

  4. 【视频开发】【Live555】摄像头采集，264编码，live555直播

    加入 摄像头采集和264编码,再使用live555直播 1.摄像头采集和264编码 将x264改成编码一帧的接口,码流不写入文件而是直接写入内存中(int  Encode_frame 函数中). /* ...

  5. Jmeter接口测试自动化（jmeter+ant+jenkins持续集成）

    Jmeter是压力测试.接口测试工具,Ant是基于Java的构建工具,具有跨平台的作用,jenkins是持续集成工具.将这三者结合起来可以搭建一套webservice接口测试的持续构建环境.   1. ...

  6. springcloud学习的坑

    一:启动Euerka作为提供者或者消费者时,启动失败报:Process finished with exit code 0 Unregistering application EUREKA-SERVI ...

  7. 12 Cookie、Session和JSP基础

    1.会话技术 (1)会话概念:一次会话中包含多次请求和响应.一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 (2)会话功能:在一次会话的范围内的多次请求间,共享数据 (3)会 ...

  8. C语言之指针在printf语句里面的使用规范

    *** 一级指针的使用规则探索 *** #include<stdio.h> #include<stdlib.h> void main() { char *p; p = &quo ...

  9. 编写第一个Linux环境下程序的编译，下载记录

    跟着韦东山学习Linux: 今天系统系统性的学了代码的编译下载,条记录一下: 一,代码:001_led_on.S,就把下面代码编译后Bin文件下载进2440处理器. /* * 点亮LED1: gpf4 ...

  10. Go语言( 运算符)

    运算符用于在程序运行时执行数学或逻辑运算. 运算符 Go 语言内置的运算符有: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 算数运算符 运算符 描述 + 相加 - 相减 * 相乘 / 相 ...