window.getComputedStyle()
语法:
let style = window.getComputedStyle(element, [pseudoElt]);
element:获取的元素
pseudoElt(可选的)指定要匹配的伪元素的字符串。必须省略(或null)常规元素
作用:获取单个css的属性值
Window.getComputedStyle()方法返回一个对象
用法:
<style>
.row {
display: flex;
color: pink
}
</style>
<div class="row"></div>
<script>
//查找class是row元素
let row = document.querySelector('.row')
console.log(row);//<div class="row"></div>
//这里输出的flex和rgb(255, 192, 203)是字符串类型
console.log(window.getComputedStyle(row).display);//flex
console.log(window.getComputedStyle(row).color);//rgb(255, 192, 203)
</script>
常用做判断
两者不一定等价
if (window.getComputedStyle(row).display == 'flex')//可以获取任意地方存放的css属性值
if (row.style.display == 'flex') //只能获取行内属性值 这里会报错