如何获取样式并且更改样式
getComputedStyle()
getComputedStyle用法
或者
document.defaultView.getComputedStyle(element[,pseudo-element]);
参数
window.getComputedStyle(element[,pseudo-element]);
【如何获取样式并且更改样式】首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。
使用示例：
getPropertyValue() 所述CSSStyleDeclaration.getPropertyValue（）方法接口返回一个
- let my_div = document.getElementById("myDiv");
- let style = window.getComputedStyle(my_div, null);
DOMString含有一个指定的CSS属性的值。参数
-
property是DOMString要检查表示属性名称。
-
*value*是一个DOMString包含该属性的值。如果未设置，则返回空字符串。
以下JavaScript代码查询marginCSS选择器规则中的属性值：
var declaration = document.styleSheets[0].cssRules[0].style;
var value = https://www.it610.com/article/declaration.getPropertyValue('margin');
// "1px 2px"
如果我们不使用
getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！使用
getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");
getComputedStyle方法在伪类元素上的特异功能总体示例
Document - 锐客网 .box {
border: 1px solid;
margin: 10px;
}
.p1 {
font-size: 20px;
padding: 10px;
color: red;
}获取dom计算后的样式
输出结果：
文章图片
image
推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树
- Linux下面如何查看tomcat已经使用多少线程
- thinkphp|thinkphp 3.2 如何调用第三方类库
- 2019女表什么牌子好（如何挑选女士手表？）