本文有：对某个事件的来回操作实现对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. SNP功能注释网站合集

    这篇文章是对SNP位点功能注释在线网站的一个总结帖. 软件排名不分先后,优先顺序可以看推荐指数. 彩蛋在最后,请坚持看完 1.GWAS4D, 推荐指数:**** 网址:http://mulinlab. ...

  2. linux：vim中全选复制

    全选(高亮显示):按esc后,然后ggvG或者ggVG 全部复制:按esc后,然后ggyG 全部删除:按esc后,然后dG 解析: gg:是让光标移到首行,在vim才有效,vi中无效 v : 是进入V ...

  3. 学习记录-java基础部分（一）

    学习记录-java基础部分(一) 参考:GitHub上的知名项目:javaGuide : https://github.com/Snailclimb/JavaGuide/blob/master/doc ...

  4. 【计算机网络基础】URI、URN和URL的区别

    先引用一张关系图 灰色部分为URI URI强调的是给资源标记命名,URL强调的是给资源定位. URI是Uniform Resource Identifier,表示是一个资源: URL是Uniform ...

  5. golang 实现定时任务

    在实际开发过程中,我们有时候需要编写一些定时任务.当然我们可以使用crontab命令实现我们的需求.但是这种方法不满足一些定制化场景,同时会依赖具体的操作系统环境. 定时任务 在golang中我们可以 ...

  6. kali_Airmon-ng第一次渗透测试

    再看了一些资料之后,决定自己整理一下进行第一次测试,测试目标,自己宿舍的WIFI.教程仅供学习参考 断开kali连接的wifi,并检查网卡状态 airmon-ng 开启无线网卡的监控模式 airmon ...

  7. 广州CBC2019

    CBC2019-day1 25 August 2019 on 学术前沿huyujia 8月24日上午,CBC2019正式开幕.主持人首先对大会情况以及与会嘉宾做了简要介绍:紧接着,校领导.大会主席以及 ...

  8. WebSocket 转

    即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s/限制x条消息)要么则限制用户数. 但稳 ...

  9. python3基础之“函数（2）”

    1.def:定义一个函数 def f(x): return x+1 #返回函数值 a=f(2) print(a) >>3 def even_odd(x): if x%2==0: " ...

  10. unity 编译之后签名被改变

    原因:在gradle 模式下编译,把development build 勾上 会使签名改变