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

最新推荐文章于 2022-04-26 07:56:49 发布

weixin_34232363

最新推荐文章于 2022-04-26 07:56:49 发布

阅读量456

点赞数

原文链接：http://www.cnblogs.com/JDDDD/p/5390883.html

版权

先来看一段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来修改。

转载于:https://www.cnblogs.com/JDDDD/p/5390883.html

weixin_34232363

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
关于CSS中对象属性无法在JS中用style获取的问题

先来看一段demo <style> div{ position:absolute; left: 10px; background: red; width: 100px; height: 100px; } ...
复制链接

扫一扫