本文有：对某个事件的来回操作实现对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. WebAPI.请求(Request)的参数(Parameter)里包含特殊字符(#等)的正确处理方式 从客户端xx中检测到有潜在危险的Request.Form值

    事故现场 报错"从客户端 中检测到有潜在危险的Request.Form值" //后台代码 namespace Test { [RoutePrefix("TestClass ...

  2. 错误：net::ERR_BLOCKED_BY_CLIENT

    提示net::ERR_BLOCKED_BY_CLIENT错误 解决办法: 当我们查看浏览器第三方插件的时候,就会看到插件中存在“广告过滤插件”,其实,报错的原因就是第三方广告过滤插件在捣鬼, 当你关闭 ...

  3. 分布式唯一ID生成常用方案

    1. 使用JAVA的UUID生成 算法的核心思想是结合机器的网卡.当地时间.一个随记数来生成UUID. 优点:本地生成,生成简单,性能好,没有高可用风险 缺点:长度过长,字母和数字组合,存储冗余,且无 ...

  4. php imagick生成gif动画的方法

    >php imagick生成gif动画的方法<pre><?php$image=new Imagick();$animation = new Imagick(); //建立一个对 ...

  5. 在ensp上配置Hybrid接口

    Hybrid接口是华为特有的一种接口 Hybrid接口是既可以连接普通终端的接入链路,又可以连接交换机间的干道链路. 简单说就是Hybrid接口既能实现Access的功能又能实现Trunk接口的功能. ...

  6. 笨方法学Python摘记(1)

    编程新手所需的最重要的三种技能:读和写.注重细节.发现不同 不要复制粘贴! #-*-codinig:utf-8 -*-  (脚本使用unicode UTF-8) 书写习惯:操作符的两边加上空格,提高代 ...

  7. 《TCP/IP - TCP/UDP》

    一:概述 - 由于 IP 的传输是无状态的,IP 提供尽力服务,但并不保证数据可以到达主机. - 所以,数据的完整性需要更上层的 传输层来保证.TCP和UDP 均属于 传输层. 二:UDP - 特点 ...

  8. [高清] 深入浅出Spring Boot 2.x.pdf + 代码

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  9. ubuntu配置Selenium+Chromedriver

    1.下载并安装最新的Google Chrome版本执行如下命令: wget https://dl.google.com/linux/direct/google-chrome-stable_curren ...

  10. .NET Core 中三种模式依赖注入的生命周期。

    注入模式 同一个请求作用域 不同的请求作用域 AddSingleton 同一个实例 同一个实例 AddScoped 同一个实例 新实例 AddTransient 新实例 新实例