关于CSS中对象属性无法在JS中用style获取的问题

先来看一段demo

    <style>
        div{
            position:absolute;
            left: 10px;
            background: red;
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementsByTagName("div")[0];
            alert(oDiv.style.left);　　
        }
    </script>
    <body>
         <div></div>
    </body>

 FF下的显示效果

会发现 明明在css样式中设置了left属性 但是获取到的值为空

解决方案：

①将css的left属性改到行间样式中，即HTML内

    <body>
         <div style="left:10px"></div>
    </body>

 会发现是可以直接获取到left属性的值的

②可以使用currentStyle(IE Opera) getComputedStyle(FF Chrome)来获取到我们想要的属性值

    <script>
        window.onload = function () {
            var oDiv = document.getElementsByTagName("div")[0];
            alert(getStyle(oDiv,'left'));
        };
        function getStyle(obj,attr) {
            if(typeof getComputedStyle)
                return getComputedStyle(obj,null)[attr];
            else return obj.currentStyle[attr];
        }
    </script>

 

最后来说一下问题的原因所在：

obj.style获取的是DOM元素CSS样式的声明对象简值。obj.style可读可写，所以我们会发现这样一个问题，当我们在JS代码中没有写obj.style之前去读obj.style也就是上面所发生的情况，会弹出一个空值，style只能获取到内联样式的具体值，而内部和外部样式无法获取到具体值。所以如果要获取CSS对象属性值，请使用currentStyle和getComputedStyle,但是currentStyle和getComputedStyle是只读的，所以修改CSS样式还是要用style来修改。

posted @ 2016-04-14 14:08  JDDDD  阅读(4070)  评论(0)  编辑  收藏  举报