obj.style

最新推荐文章于 2021-05-12 21:28:00 发布

我的风格0.0

最新推荐文章于 2021-05-12 21:28:00 发布

阅读量349

点赞数

原文链接：https://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