js获取元素CSS值的各种方法

最新推荐文章于 2025-10-17 13:50:52 发布

原创最新推荐文章于 2025-10-17 13:50:52 发布 · 7.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

本文介绍了三种在JavaScript中获取元素CSS值的方法：getComputedStyle、style和currentStyle。getComputedStyle适用于所有现代浏览器，能获取元素所有样式的最终值；style只能获取行内样式；currentStyle是IE浏览器的特有属性，用于兼容旧版IE。通过示例代码展示了如何获取元素的边框信息。

js获取元素CSS值的各种方法

1、getComputedStyle

getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。

该方法用于获取计算机（浏览器）计算后的样式，即获取的是元素最终的样式。它可以访问所有样式，即既可以是行内样式，也可以是内嵌或链式样式。它对所有标准浏览器都可用，但 IE6、IE7 和 IE8 不支持该方法。

getComputedStyle(需访问样式属性的元素).样式属性

2、style

element.style只能获取元素style属性中的CSS样式。

和getComputedStyle对比的话，一个简单的例子，如果一个元素没有设置边框，getComputedStyle取到的值是0，style取到的值是空；

需访问样式属性的元素.style.样式属性

3、currentStyle
只读

currentStyle 和 getComputedStyle类似，知识写法不一样；

该属性只对 IE 浏览器有效，对 Chrome 和 FF 浏览器不可用，其主要是用于兼容 IE6、IE7 和 IE8。所以你可以认为currentStyle 是对 getComputedStyle补充；

需访问样式属性的元素.currentStyle.样式属性

示例

获取元素边框信息

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test1"></div>
    <script>
        var test1 = document.getElementById("test1");
        console.log('浏览器名称:' + navigator.appName);
        console.log('浏览器版本:' + navigator.appVersion);
        //兼容处理
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj)[attr];
            }
        }
        console.log(getStyle(test1,'border'));
        console.log(getComputedStyle(test1).border);
        console.log(test1.style.border);
    </script>
</body>

</html>