JavaScript获取非行间样式的方法

最新推荐文章于 2023-02-19 20:51:04 发布

GY_U_YG

最新推荐文章于 2023-02-19 20:51:04 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/GY_U_YG/article/details/72125734

版权

前端专栏收录该内容

61 篇文章

订阅专栏

本文介绍了一种兼容多种浏览器的样式获取方法，通过自定义函数 getStyle 实现了对元素宽度等样式的统一读取，无论是内联样式还是 CSS 中定义的样式都能正确获取。

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

如果样式写在行间，直接可以使用obj.style.attr即可获得，可是如果写在css中，再使用这种方法，是获取不到任何内容的，这里，我介绍一种既能获取行间样式，又能获取非行间样式的方法，并封装成函数，具备兼容性

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script type="text/javascript">
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, null)[attr];
            }
        }
        var oDiv = document.getElementById('div1');
        console.log('getStyle(width) = ' + getStyle(oDiv, 'width'));
    </script>
</body>
</html>