（一）通过.style.形式，获取的是行间样式，可读可写

1.行间样式语法

1     <div style="width:100px;border:5px solid red;height:100px;background-color:green">

2

3     </div>

行间样式语法规则如下：

样式属性写在style的引号里面；样式名与样式值中间冒号隔开；样式与样式之间用分号隔开；

2.通过JS操作CSS

 1 <body>

 2     <div style="width:100px;border:5px solid red;height:100px;background-color:green">

 3

 4     </div>

 5 <script type="text/javascript">

 6     var div = document.getElementsByTagName('div')[0];

 7

 8     div.style.width = "300px"

 9     div.style.backgroundColor = "blue"

10 </script>

注意点：

(1).   左边是属性名，中间是赋值符号，右边是字符串形式；

(2).   左边的属性名，由于JS变量不支持特殊符号（如中横线），所以有中横线连写的变量要改成小驼峰形式；即background-color 改为 backgroundColor；

3. 通过JS操作CSS都是行间样式

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <style>

 7         div{

 8             width:100px;

 9         }

10     </style>

11 </head>

12 <body>

13     <div style="height:100px;border:5px solid red;background-color:green">

14

15     </div>

16 <script type="text/javascript">

17     var div = document.getElementsByTagName('div')[0];

18

19     div.style.width = "300px"

20     div.style.backgroundColor = "blue"

21 </script>

22 </body>

23 </html>

***************************************************************************************************************************************************************************************

（二）查询样式属性值

获取当前元素经过计算所展示的样式一切值;（只能读，不能写）

(1)window.getComputedStyle(ele,null);

改方法特性如下：

(2)   ele.currentStyle

由于IE问题，有兼容性问题；下面我们自己来写封装兼容性函数getStyle(ele,prop)

1     function getStyle(ele,prop) {

2         if(window.getComputedStyle){

3             return window.getComputedStyle(ele,null)[prop];

4         }else{

5             return ele.currentStyle[prop];

6         }

7     }

脚本化CSS（通过JS来间接操作CSS）的更多相关文章

  1. 解决修改css或js文件后，浏览器缓存未更新问题

    问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...

  2. 运用 CSS in JS 实现模块化

    一.什么是 CSS in JS 上图来源:https://2019.stateofcss.com/technologies/ CSS in JS 是2014年推出的一种设计模式,它的核心思想是把 CS ...

  3. 性能优化-css，js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  4. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  5. jacascript CSS样式的脚本化(js)操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 引入CSS有3种方式:行间样式,内联样式和外部链接样式. 在实际工作中,我们使用 javascript 操 ...

  6. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  7. 深入理解脚本化CSS系列第四篇——脚本化样式表

    × 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...

  8. 深入理解脚本化CSS系列第三篇——脚本化CSS类

    前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...

  9. 深入理解脚本化CSS系列第一篇——脚本化行内样式

    × 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...

随机推荐

  1. response返回特性

    1. response 返回特性 r=requests.get("http://www.baidu.com")print(r.text) #打印返回正文print(r.status ...

  2. Failed to start LSB: starts php-fpm

    跟nginx一样都是进程占用,记录下 [root@localhost pazzn]# systemctl status php-fpm.service ● php-fpm-72.service - L ...

  3. Mybatis报错:Could not find resource mybatis-conf.xml

    Mybatis报错:Could not find resource mybatis-conf.xml 报错截图: 报错内容: java.io.IOException: Could not find r ...

  4. 1、剑指offer-数组——二维数组中的查找

    *题目描述* **在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含 ...

  5. C# 防止程序多开（重复开启）

    Mutex(mutual exclusion,互斥)是 .Net Framework 中提供跨多个线程同步访问的一个类.它非常类似了 Monitor 类,因为他们都只有一个线程能拥有锁定.而操作系统能 ...

  6. 你的隐私数据真的安全吗之memset（）使用分析

    我们在实际编程中,需要保存许多私有数据,例如:密码.密钥等等.所以,我们需要经常在使用完这些私有数据后,清除内存使用踪迹,以防止被潜在的入侵者获得这些数据.这篇文章中,我们讨论使用memset()函数 ...

  7. koa2+koa-generator+mysql快速搭建nodejs服务器

    koa2+koa-generator+mysql快速搭建nodejs服务器 用koa的脚手架koa-generator可以快速生成项目骨架,可以用于发开或者测试接口 https://github.co ...

  8. Java——接口、匿名类

    接口语法 public interface Demolnteface{ public void demo(): //其他方法 //所有方法都是抽象的 } 接口里放: 1.静态常量 (一般全部大写) 2 ...

  9. Spring Boot，Spring Cloud，Eureka，Actuator，Spring Boot Admin，Stream，Hystrix

    Spring Boot,Spring Cloud,Eureka,Actuator,Spring Boot Admin,Stream,Hystrix 一.Spring Cloud 之 Eureka. 1 ...

  10. HttpClientUtils：Http请求工具类

    HttpClientUtils:Http请求工具类 Scala:HttpClientUtils Scala:HttpClientUtils import java.io.IOException imp ...