（一）通过.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. 低功耗降线性稳压器，24V转5V降压芯片

    PW2330开发了一种高效率的同步降压DC-DC变换器3A输出电流.PW2330在4.5V到30V的宽输入电压范围内工作集成主开关和同步开关,具有非常低的RDS(ON)以最小化传导 损失.PW2330 ...

  2. 干电池1.5V升压3.3V芯片电路图

    1.5V升压3.3V的芯片 PW5100 是一款大效率.10uA低功耗.低纹波.高工作频率1.2MHZ的 PFM 同步升压 DC/DC 变换器.输入电压可低0.7V,输入电压范围0.7V-5V之间,输 ...

  3. Databricks 第9篇：Spark SQL 基础（数据类型、NULL语义）

    Spark SQL 支持多种数据类型,并兼容Python.Scala等语言的数据类型. 一,Spark SQL支持的数据类型 整数系列: BYTE, TINYINT:表示1B的有符号整数 SHORT, ...

  4. 将汉字取模软件中的汉字放到keil5中显示

    最近因为要使用STM32做毕业设计,需要用LCD显示中文,STM32开发板用的是原子的战舰STM32开发板,给的LCD显示例程里貌似没有中文显示,那么需要自己去编写中文显示程序. 软件编写对我来说并不 ...

  5. apache状态显示报错AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using localhost.localdo...is message

    今天启动apache查看状态发现报错,说不能确认服务器完全确认域名,以下是报错内容: [root@localhost ~]# service httpd status Redirecting to / ...

  6. JMeter去掉启动的cmd命令窗口和制作快捷方式

    1.去掉启动的cmd命令窗口 在使用jmeter时,如果使用默认的jmeter.bat启动的话,会出现一个CMD命令窗口,之后才会启动jmeter工作界面: 如果直接启用ApacheJMeter.ja ...

  7. C#高级编程第11版 - 第三章 索引

    [1]3.1 创建及使用类 1.构造函数:构造函数的名字与类名相同: 使用 new 表达式创建类的对象或者结构(例如int)时,会调用其构造函数.并且通常初始化新对象的数据成员. 除非类是静态的,否则 ...

  8. no-referrer-when-downgrade

    原因: 从一个网站链接到另外一个网站会产生新的http请求,referrer是http请求中表示来源的字段.no-referrer-when-downgrade表示从https协议降为http协议时不 ...

  9. GRPC Health Checking Protocol Unavailable 14

    https://github.com/grpc/grpc/blob/master/doc/health-checking.md GRPC Health Checking Protocol Health ...

  10. 单点登录（SSO）的设计与实现

    一.前言 1.SSO说明 SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...