验证style,currentStyle以及getComputedStyle的兼容性。

最新推荐文章于 2020-09-18 22:49:43 发布

Sterope_

最新推荐文章于 2020-09-18 22:49:43 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Ssterope/article/details/51789535

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在此先讲解一下三者用法：
obj.style.attr;
obj.currentStyle.attr;
getComputedStyle(obj,x).attr;

前者可以用以获取+设置样式，而后两者均只能获取。

其中前者可以获取的是行间样式，即内联样式。嵌入样式和外部样式都无法获取。后两者获取到的是当前样式，即浏览器最终呈现出的样式结果。
PS：三者都只能对简单样式进行获取，复合型如background是没办法获取的。

最后是三者的兼容性问题，
为了验证兼容性，利用IE和Chrome进行了实验。
实验代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #div1{
        background: #999;
        width:800px;
        height: 200px;
        color:white;
    }

    </style>
</head>
<body>
    <div id="div1">ashadow</div>
    <script type="text/javascript">
        var div1=document.getElementById('div1');
        alert(div1.style.color);//只能获取行间样式
        alert(div1.currentStyle.height);//IE7- IE11兼容  IE外浏览器不兼容
        alert(getComputedStyle(div1,false).width);//IE7不兼容 IE11兼容 FF、opera、safari、chrome兼容

    </script>
</body>
</html>