javascript-通过getComputedStyle()计算元素的所有样式

最新推荐文章于 2025-05-23 17:18:50 发布

harmsworth2016

最新推荐文章于 2025-05-23 17:18:50 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js计算样式 getComputdStyle currentStyle

本文链接：https://blog.youkuaiyun.com/harmsworth2016/article/details/79839902

javascript 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用getComputedStyle()方法获取HTML元素的实际样式，包括所有默认样式，并提供了一个兼容IE8的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript-计算元素的所有样式

javascript-计算元素的所有样式

在日常开发中，如果你需要读取html元素的style样式或class样式的属性值时，就可以使用DOM2级样式中新增的方法-getComputedStyle()。

getComputedStyle()

getComputedStyle()方法是window对象的方法，可以通过window.getComputedStyle()，或者document.defaultView.getComputedStyle()方法调用。而document.defaultView的返回值就是window。
接收2个参数：

需要计算样式的元素，必须
伪元素字符串（’:after’），非必须
示例如下：

<!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>计算样式</title>
    <style>
        #content{
            width: 300px;
            height: 200px;
            background-color: darkgrey;
        }
    </style>
</head>
<body>
    <div id="content" style="background-color: darkmagenta;">
        内容区域
    </div>
    <script>
        var content = document.querySelector('#content')
        var computedStyle = document.defaultView.getComputedStyle(content, null)
        var html = ''
        function getComputedStyleValue(computedStyle, property){
            return property + ': ' + computedStyle[property] + ';'
        }
        html = '<span>'+getComputedStyleValue(computedStyle, 'background-color')+'</span><br/>'+
        '<span>'+getComputedStyleValue(computedStyle, 'width')+'</span><br/>' +
        '<span>'+getComputedStyleValue(computedStyle, 'height')+'</span><br/>'
        content.innerHTML = html
    </script>
</body>
</html>

这里写图片描述

如上图所示：
浏览器通过getComputedStyle()方法读取样式，这些样式是可读的，也包括所有的默认样式。background-color被替换了，且浏览器将颜色转成rgb格式，经测试，IE10/11，Chrome等5大主流浏览器都支持该方法。

兼容IE8

var content = document.querySelector('#content')
        var computedStyle = getConstantStyle(content, null)
        var html = ''
        function getComputedStyleValue(computedStyle, property){
            return property + ': ' + computedStyle[property] + ';'
        }
        // 获取计算样式
        function getConstantStyle(el, pelStr){
            var w = document.defaultView
            if (w && w.getComputedStyle) {
                return document.defaultView.getComputedStyle(el, pelStr)
            } else {
                return el.currentStyle
            }
        }
        html = '<span>'+getComputedStyleValue(computedStyle, 'background-color')+'</span><br/>'+
        '<span>'+getComputedStyleValue(computedStyle, 'width')+'</span><br/>' +
        '<span>'+getComputedStyleValue(computedStyle, 'height')+'</span><br/>'
        content.innerHTML = html