本文有：对某个事件的来回操作实现对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. Laya页面嵌套和Scene.destory导致的Bug

    Laya2.1.1.1 参考: 预设使用 Laya给出了相同模块,逻辑代码也相同情况下,使用页面嵌+runtime的使用方案.但是该方案和Laya.Scene.open,Laya.Scene.dest ...

  2. tushare包使用案例

    Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据,为他们在数据获取 ...

  3. Linux交换分区内存优化

    swappiness的值的大小对如何使用swap分区是有着很大的联系的.swappiness=0的时候表示最大限度使用物理内存,然后才是 swap空间,swappiness＝100的时候表示积极的使用 ...

  4. AppCrawler安装使用

    百度网盘: https://pan.baidu.com/s/1bpmR3eJ mac下安装appium 真机或者模拟器均可. 确保adb devices可以看到就行 启动appium 启动appium ...

  5. LeetCode 84. 柱状图中最大的矩形(Largest Rectangle in Histogram)

    84. 柱状图中最大的矩形 84. Largest Rectangle in Histogram

  6. win7系统的CMD窗口切换目录--小计

    经常使用win7系统的CMD窗口,需要切换到工作目录,方法如下: 1. Win + R 2. 在命令行输入 cmd 出现如下: C:\Users\admin> 3. 在以上输入 D: (表示切换 ...

  7. Go语言 ( 切片)

    本文主要介绍Go语言中切片(slice)及它的基本使用. 引子 因为数组的长度是固定的并且数组长度属于类型的一部分,所以数组有很多的局限性. 例如: func arraySum(x []int) in ...

  8. 5. JDBC/ODBC服务器

    Spark SQL也提供JDBC连接支持,这对于让商业智能(BI)工具连接到Spark集群上以及在多用户间共享一个集群的场景都非常有用.JDBC服务器作为一个独立的Spark驱动器程序运行,可以在多用 ...

  9. Shell变量一览

    Shell变量一览 $# Shell命令的参数个数 $$ Shell本身的进程ID $! Shell最后运行的后台进程的进程ID $? Shell最后运行的命令的退出码(返回值) $- Shell使用 ...

  10. java程序员必须熟悉的一些操作

    1.mysql数据库服务启动命令 /etc/init.d/mysqld start     --启动命令      mysql数据库安装方法参考           http://www.blogja ...