脚本化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种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...
随机推荐
- 1.2V转3V芯片，电路图很少就三个元件
1.2V的镍氢电池由于稳定高,应用产品也是很广,但是由于电压低,需要1.2V转3V芯片,来将1.2V的电压升压转3V,稳定输出供电. 一般性的1.2V转3V芯片,都是用PW5100比较多,固定输出电压 ...
- 2V升3V芯片，输入2V输出3V可达1A
PW5328B是一个恒定频率, 6引脚 SOT23电流模式升压转换器,用于小型低功耗应用. PW5328B的开关频率为 1.2MHz,允许使用微小的.低成本的电容器和电感器.内部软启动导致小涌流和延长 ...
- 解决maven中某些依赖无法下载，手动安装Maven依赖
<!--先下载jar包,然后在仓库中手动安装,下面是遇到的两个例子--> <!--第一个--> mvn install:install-file -Dfile=D:\kaptc ...
- 1、kubernetes简介
Kubernetes简介 文档信息 中文官网:https://kubernetes.io/zh 中文社区:https://www.kubernetes.org.cn/ Kubernetes是容器集群管 ...
- git的使用学习笔记3---关于项目分支创建克隆拉取推送
一.创建项目 1.打开官网 2.填写相关内容 查看新创建的项目 3.选择方式 4.在git上新建文件夹 1)克隆: mkdir workspace 将代码克隆到本地,取本地配置的.ssh的文件 git ...
- win api 窗口操作-窗口置顶与寻找与激活
https://docs.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-setwindowpos https://docs.micr ...
- Centos7 Nginx 安装
下载地址:http://nginx.org/download/nginx-1.18.0.tar.gz 1.准备工作 #安装gcc yum install gcc-c++ #安装pcre pcre-de ...
- 【算法】深度优先搜索（dfs）
突然发现机房里有很多人不会暴搜(dfs),所以写一篇他们能听得懂的博客(大概?) PS:万能 yuechi ---- 大法师怎么能不会呢?! 若有错误,请 dalao 指出. 前置 我知道即使很多人都 ...
- 一次sql server实战
前言:朋友在做授权项目的时候,遇到一个sql server数据库的注入点,没办法解决,让我帮忙看看,因为是授权项目,所以就可以帮助测试下. 内容如下: 单引号,很明显的错误,因为是时间格式:2020- ...
- Apache Cocoon XML注入 [CVE-2020-11991]
受影响版本: Apache Cocoon <= 2.1.x 程序使用了StreamGenerator这个方法时,解析从外部请求的xml数据包未做相关的限制,恶意用户就可以构造任意的xml表达式, ...