获取单个css属性值

128 阅读1分钟

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')     //只能获取行内属性值  这里会报错