（一）通过.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. EXPORT和IMPORT使用示例

    1 report ztestprog. 2 data:begin of itab1 occurs 0, 3 ff(10), 4 end of itab1. 5 data:itab2 like itab ...

  2. Nginx的简介和使用nginx实现请求转发

    一.什么是Nginx Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为H ...

  3. 07. struts2中对Action的管理方式

    web.xml配置文件的常用代码 <filter> <filter-name>struts2</filter-name> <filter-class>o ...

  4. 04. struts2中Result配置的各种视图转发类型

    概述 <action name="helloworld" class="com.liuyong666.action.HelloWorldAction"&g ...

  5. 无法获取 vmci 驱动程序版本： 句柄无效。 驱动程序 vmci.sys 版本不正确。请尝试重新安装 VMware Workstation。 打开模块DevicePowerOn电源失败。

    1.别打开电源,然后到虚拟机安装文件夹内.2.找到你的虚拟机系统文件中后缀为vmx的文件,右击用记事本或者Notepad++打开.2.搜索找到vmci0.present='TRUE',字段,把true ...

  6. Linux更改密码报错:密码未通过字典检查 - 过于简单化/系统化

    Linux更改密码报错:密码未通过字典检查 - 过于简单化/系统化 方案一:直接忽略 很容易认为这儿是一个错误,其实可以直接忽略,重新输入密码 [root@localhost ~]# passwd 更 ...

  7. Why failover-based implementations are not enough Redis分布式锁实现 SET resource_name my_random_value NX PX 30000

    核心 SET resource_name my_random_value NX PX 30000 Distributed locks with Redis – Redis https://redis. ...

  8. gstack pstack strace

    gstack pstack strace 通过进程号 查看 进程的工作目录 Linux神器strace的使用方法及实践 - 知乎 https://zhuanlan.zhihu.com/p/180053 ...

  9. 网页小实验——用canvas生成精灵动画图片

    实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现. 初始图片如下: 一.图片分割 将初始图片分割为六 ...

  10. 【Coursera】Internet History 读书笔记

    前言 这个Internet History 有些令人劝退.电脑无法播放视频.手机不能播放.最后百度了改了hosts文件才可以. 附上解决方法: 解决coursera可以登录但无法播放视频 第一周 第三 ...