如何获取样式并且更改样式
2018-07-01 本文已影响0人
初入前端的小菜鸟
getComputedStyle()
getComputedStyle用法
document.defaultView.getComputedStyle(element[,pseudo-element]);
或者
window.getComputedStyle(element[,pseudo-element]);
参数
首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。
使用示例：
- let my_div = document.getElementById("myDiv");
- let style = window.getComputedStyle(my_div, null);
getPropertyValue()
所述CSSStyleDeclaration.getPropertyValue（）方法接口返回一个DOMString含有一个指定的CSS属性的值。
参数
-
property是DOMString要检查表示属性名称。
返回值
-
*value*是一个DOMString包含该属性的值。如果未设置，则返回空字符串。
例
以下JavaScript代码查询marginCSS选择器规则中的属性值：
var declaration = document.styleSheets[0].cssRules[0].style;
var value = declaration.getPropertyValue('margin'); // "1px 2px"
如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！
使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");
getComputedStyle方法在伪类元素上的特异功能
总体示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
border: 1px solid;
margin: 10px;
}
.p1 {
font-size: 20px;
padding: 10px;
color: red;
}
</style>
</head>
<body>
<div class="box">
<p class="p1">获取dom计算后的样式</p>
</div>
<script>
//获取未更改前p元素的color值，返回rpg模式
var str = document.querySelector("p")
var color = window.getComputedStyle(str).getPropertyValue("color")
console.log(color)
//获取为更改前的padding值
var pad = window.getComputedStyle(str).getPropertyValue("padding")
console.log(pad)
//获取更改前的字体大小值
var size = window.getComputedStyle(str).getPropertyValue("font-size")
console.log(size)
//更改字体大小和字体颜色
str.style.color = "#FFDAB9"
str.style.fontSize = "40px" // 中间不能按照css样式加“-” 要按照驼峰命名法来获取字体大小的属性
//获取未更改后p元素的color值，返回rpg模式
var color1 = window.getComputedStyle(str).getPropertyValue("color")
console.log(color1)
//获取更改后的字体大小值
var size1 = window.getComputedStyle(str).fontSize//(使用键值访问也可以，但是一定要使用驼峰命名的方式来写css的属性值)//getPropertyValue("font-size")
console.log(size1)
</script>
</body>
</html>
输出结果：
image
