offset家族

明明设置了width的值但是用js获取style.width的时候却为空,而offsetWidth不会

<html>  
<head>  
    <meta charset="utf-8">  
    <title></title>  
    <style type="text/css">  
        div{  
             background-color: red;  
             height: 50px;  
             width: 500px;  
             margin-top: 10px;  
             border: 1px solid #000;  
             padding: 10px;  
        }  
    </style>  
    <script type="text/javascript">  
        window.onload = function(){  
        var div = document.getElementById('div');  
        alert(div.style.width);  
        alert(div.offsetWidth);  
        }  
    </script>  
</head>  
<body>  
    <div id="div"></div>  
</body>  
</html>  

style.width || offsetwidth都返回自己的宽,,,, style.width的值为空是因为它只获取行内样式,而我们设置的是行间样式,所以为空,当我们设置行内样式时,它会弹出宽度,且是带有px的字符串。所以使用的时候要注意。offsetwidth = width + border + padding;

区别

1、style.width 可读可写 offsetleft 只可读
2、style.width 返回的是字符串 offsetwidth 返回的是数字
3、style.width 只获取行内样式 offsetwidth随便(最重要的区别)
4、只有定位的盒子才有style.left 而offsetLeft 可以返回没有定位盒子的距离左侧的位置
5、没有给HTML元素指定style.top样式,则style.top返回的是空字符。

offsetParent

返回改对象的父级(带有定位的)不一定是亲的
前面有个返回对象的父级(亲的)parentNode,当有多个父级元素定位时,返回最近的那个父级元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容