本文有：对某个事件的来回操作实现对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. uni-app v-for循环遍历 动态切换class、动态切换style

    动态切换class,主要代码::class="i.themColor"  <view v-for="i in htmlJSON" class=" ...

  2. 使用GridSearchCV进行网格搜索微调模型

    import numpy as np import pandas as pd from sklearn.feature_extraction.text import TfidfVectorizer f ...

  3. PAT 甲级 1075 PAT Judge (25分)（较简单，注意细节）

    1075 PAT Judge (25分)   The ranklist of PAT is generated from the status list, which shows the scores ...

  4. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

  5. [LeetCode] 1. Two Sum 两数和

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  6. Web服务器、应用程序服务器、web应用服务器、反向代理服务器

    参考链接:https://www.cnblogs.com/zhaoyl/archive/2012/10/10/2718575.html 首先我们来了解什么是服务器(server) 一般来说,serve ...

  7. SpringBoot系列教程web篇之Freemaker环境搭建

    现在的开发现状比较流行前后端分离,使用springboot搭建一个提供rest接口的后端服务特别简单,引入spring-boot-starter-web依赖即可.那么在不分离的场景下,比如要开发一个后 ...

  8. tomcat-修改端口--号

    1.背景 在默认情况下,tomcat的端口是8080,使用了两个tomcat,那么就需要修改其中的一个的端口号才能使得两个同时工作. 2.方法 2.1改动一 那么,如何修改tomcat的端口号呢?首先 ...

  9. c#动态类转json，再由json转xml

    直接上代码了,多说无意了. using System; using System.Collections; using System.Collections.Generic; using System ...

  10. nRF24L01/nRF24L01+应用总结

    nRF24L01+是nRF24L01的升级款,比较显眼的区别是nRF24L01+比nRF24L01多了一个250Kbps传输速率.其它的还有接收模式官方给的耗电量是不一样的.个别寄存器名字不一样. 接 ...