脚本化CSS（通过JS来间接操作CSS）
（一）通过.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）的更多相关文章
- 解决修改css或js文件后，浏览器缓存未更新问题
问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...
- 运用 CSS in JS 实现模块化
一.什么是 CSS in JS 上图来源:https://2019.stateofcss.com/technologies/ CSS in JS 是2014年推出的一种设计模式,它的核心思想是把 CS ...
- 性能优化-css，js的加载与执行
前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...
- 性能优化之html、css、js三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
- jacascript CSS样式的脚本化(js)操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 引入CSS有3种方式:行间样式,内联样式和外部链接样式. 在实际工作中,我们使用 javascript 操 ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
- 深入理解脚本化CSS系列第四篇——脚本化样式表
× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
- 深入理解脚本化CSS系列第三篇——脚本化CSS类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...
- 深入理解脚本化CSS系列第一篇——脚本化行内样式
× 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...
随机推荐
- 【图像处理】RGB Bayer Color分析
Bayer色彩滤波阵列 拜耳色彩滤波阵列(Bayer Color Filter Array,CFA)是非常有名的彩色图片的数字采集格式.色彩滤波器的模式如上图所示,由一半的G,1/4的R,1/4的B组 ...
- Win2008 server R2重置登录密码Administrator
1.PE方式修改密码 背景:https://www.cnblogs.com/Crazy-Liu/p/11245730.html 上述连接中的有AD域的机器系统使用哑巴式老毛桃等启动PE出现以下: 原因 ...
- Python+Selenium+Unittest实现PO模式web自动化框架（3）
1.Outputs目录下的具体目录功能 2.logs目录 logs目录是用于存放log日志的一个目录. 2.reports目录 reports目录是用于存放测试报告的. 3.screenshots目录 ...
- code-server scala error: object apache is not a member of package org
原因是scala缺少包,需要把spark或对应的包放入scala目录下的lib,然后重启主机,在terminal输入reboot即可. 如果不重启主机,则在交互式编程中可以成功import.但是直接在 ...
- 精通MySQL之索引篇，这篇注重练习！
老刘是即将找工作的研究生,自学大数据开发,一路走来,感慨颇深,网上大数据的资料良莠不齐,于是想写一份详细的大数据开发指南.这份指南把大数据的[基础知识][框架分析][源码理解]都用自己的话描述出来,让 ...
- Spring听课笔记（tg）2
配置Bean -- 配置形式:基于XML 文件的方式, 基于注解的方式 -- Bean的配置方式:通过全类名(反射).通过工厂方法(静态工厂方法&实例工厂方法).FactoryBean -- ...
- Excel 多种粘贴方式
一.粘贴为数值. 这个功能是选择性粘贴中最常用的功能.因为excel主要功能之一就是用来做数据分析,把其他格式粘贴为数据格式才能进行数据运算,把带有公式的计算结果粘贴为数值格式可以使复制后的内容不会变 ...
- 七：SpringBoot-集成Redis数据库，实现缓存管理
SpringBoot-集成Redis数据库,实现缓存管理 1.SpringBoot集成Redis 1.1 核心依赖 1.2 配置文件 1.3 简单测试案例 1.4 自定义序列化配置 1.5 序列化测试 ...
- Navicat,Dbeaver,heidiSql,DataGrip数据库连接工具比较
Navicat,Dbeaver,heidiSql,DataGrip数据库连接工具比较 1.Navicat 2.DBeaver 3.heidiSql 4.DataGrip 1.Navicat Navic ...
- docker（mysql-redmine）
一.安装docker 首先查看自己的版本,我的是centos 版本为 [root@localhost redmine]# uname -r 3.10.0-862.el7.x86_64 移除旧版本 yu ...