JavaScript读取元素当前css样式——解决currentStyle不兼容问题

最新推荐文章于 2020-04-25 09:54:32 发布

LiLi_code

最新推荐文章于 2020-04-25 09:54:32 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/LiLi_code/article/details/104915040

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

Html

5 篇文章

订阅专栏

本文讨论了JavaScript在获取元素CSS样式时遇到的兼容性问题，包括style只能获取内联样式，currentStyle是IE专属，而getComputedStyle仅支持IE9+。为了解决这些问题，提出了一个兼容性函数的实现。

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

注：style它只能获取到内联样式中的属性值；currentStyle它由于兼容性不好，是IE专属的用来获取CSS属性，但是谷歌和火狐都不支持；getComputedStyle()方法，也不能完美兼容，只支持IE9+以上的浏览器

故，使用一个函数将其兼容性统一解决：

var CurrentStyle = function (element) {
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};

完整代码可供参考如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读取元素当前样式</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var CurrentStyle = function (element) {
                 return element.currentStyle || 
                        document.defaultView.getComputedStyle(element, null);
            };
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                alert(box1.style.width); //style只能读内联样式

                alert(CurrentStyle(box1).width); //基本样式都可以读出来
            }
        }
    </script>
</head>
<body>
<button id="btn01">点击1</button>
<br><br>
<div id="box1"></div>
</body>
</html>