window.getComputedStyle()

最新推荐文章于 2024-10-02 05:39:15 发布

_处女座程序员的日常

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量416

点赞数

分类专栏： css html 前端文章标签： javascript html

本文链接：https://blog.csdn.net/qq_42931285/article/details/124369477

版权

前端同时被 3 个专栏收录

372 篇文章 13 订阅

订阅专栏

css

113 篇文章 0 订阅

订阅专栏

html

46 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript的window.getComputedStyle方法，用于获取元素的计算样式，包括背景颜色、宽度、高度等。示例代码展示了如何获取指定元素及伪元素的样式属性，如display和content。

摘要由CSDN通过智能技术生成

window.getComputedStyle()方法返回一个 CSSStyleDeclaration 对象，与 style 属性的类型相同，其中包含元素的计算样式；
用法如下：

document.defaultView.getComputedStyle(element, [pseudo-element])

// or
window.getComputedStyle(element, [pseudo-element])

说明：
element 用于获取计算样式的Element。
pseudoElt 可选指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        #root {
            background-color: pink;
            width: 100px;
            height: 200px;
        }

        #root::after {
            content: 'Haskell';
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div id="root" style="background-color: rgb(135, 206, 235);"></div>
</body>
<script>
    function getStyleByAttr(node, name) {
        return window.getComputedStyle(node, null)[name]
    }

    const node = document.getElementById('root')

    // rgb(135, 206, 235)
    console.log(getStyleByAttr(node, 'backgroundColor'))

    // 100px
    console.log(getStyleByAttr(node, 'width'))

    // 200px
    console.log(getStyleByAttr(node, 'height'))

    // table
    console.log(window.getComputedStyle(node, '::after').display)

    // Haskell
    console.log(window.getComputedStyle(node, '::after').content)
</script>

</html>