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

最新推荐文章于 2024-06-19 09:24:05 发布

gitHub_zhangbqPlus

最新推荐文章于 2024-06-19 09:24:05 发布

阅读量7.4k

点赞数 1

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/zhangpu_/article/details/121712302

版权

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>

gitHub_zhangbqPlus

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js获取元素CSS值的各种方法

js获取元素CSS值的各种方法1、getComputedStylegetComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。该方法用于获取计算机（浏览器）计算后的样式，即获取的是元素最终的样式。它可以访问所有样式，即既可以是行内样式，也可以是内嵌或链式样式。它对所有标准浏览器都可用，但 IE6、IE7 和 IE8 不支持该方法。getComputedStyle(需访问样式属性的
复制链接

扫一扫