获取元素样式 currentStyle 和 getcomputedStyle

最新推荐文章于 2024-10-18 11:12:30 发布

weixin_30641465

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fenggu/p/4528644.html

版权

场景

你要获取某一元素的样式，可是没有获取到，返回的值为undefined，可是有时候又能成功？

为什么？

因为，xx.stly.xxx 可以获取的样式信息，是dom元素style属性里的样式，对于通过<style>标签，或外部样式表定义的，我们就无法获取了。当然，js给予的也是dom。

怎么办？

dom标准里有个全局方法 getComputedStyle 。可以获取到当前对象样式规则信息，这还不算完，因为IE不支持。。。

IE有自己的 currentStyle 所以，你要兼容他们，怎么做？

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,html{
            height: 100%;
        }
        body{
            background-color:red;
            background-image:url(实验.png)
        }
    </style>
</head>
<body>
<div id="div1" style=''></div>
</body>
<script type="text/javascript">
window.onload = function(){
    function t (obj,sx) {
        if(obj.currentStyle){
            return obj.currentStyle[sx];
        }else{
            return getComputedStyle(obj,false)[sx];
        }
    }
        var body =document.getElementsByTagName('body');
        body[0].style.backgroundImage ="url(实验.png)";
        alert(t(body[0],"backgroundColor"));
        }
    </script>
</html>