js获取CSS样式

CSS样式大体分为三种

1.外联样式(.css文件引入)
2.内联样式(style标签引入)
3.内嵌样式(element的Style属性)

JS获取CSS样式

1.通过element.style获取

注：这种方式获取的是元素的内嵌样式，无法获取元素内联样式和外联样式。

结果如下：CSSStyleDeclaration对象包含的value值为内嵌样式的值。

image.png

2.通过window.getComputedStyle(element, [pseudoElt])获取。

注：可以获取元素的所有css属性。

结果如下：CSSStyleDeclaration对象包含的value值为元素自身的所有样式值。

image.png

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css.css">
    <style type="text/css">
        .box {
            color: skyblue;
            background: black;
        }
        .content {
            background: pink;
        }
        div {
            padding: 10px;
        }
        #box {
            border: 10px solid grey;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <span class="content" id="content" style="font-size: 20px; text-align: center; margin: 20px;">
            CSS样式分为外联(.css文件引入) 内联(style标签) 内嵌(element的style属性)
        </span>
    </div>
    <script>
        // js获取元素的样式方法
        let el = document.getElementById('content')
        // element.style获取的是elment的内嵌样式
        console.log(el.style, el.style.background, el.style.fontSize)
        // window.getComputedStyle(element)
        console.log(window.getComputedStyle(el), window.getComputedStyle(el).background, window.getComputedStyle(el).fontSize)
        // js设置元素的样式方法
    </script>
</body>

</html>

引入的css文件内容

* {
    padding: 0;
    margin: 0;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容