DOM-->位置和尺寸

位置和尺寸

位置

offsetLeft, offsetTop

当前元素到定位父级的距离(偏移值)

到当前元素的offsetParent的距离

如果没有定位父级:

  • offsetParent -> body

  • offsetParent -> html

如果有定位父级:

  • ie7以下:如果自己没有定位,那么offsetLeft[Top]是到body的距离
    如果自己有定位,那么就是到定位父级的距离

  • 其他:到定位父级的距离

到文档顶部位置:

function getPos(obj) {    
    var pos = {left:0, top:0};
    
    while (obj) {
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    
    return pos;
    
}

尺寸

style.width : 样式宽
clientWidth : 可视区宽
offsetWidth : 占位宽

<div style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>

<script>
alert( oDiv.style.width );  //100
alert( oDiv.clientWidth );  //样式宽 + padding 120
alert( oDiv.offsetWidth );  //样式宽 + padding + border  122
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容