js学习笔记17----元素的各种位置，尺寸-优快云博客

本文介绍了如何使用JavaScript获取HTML元素的位置与尺寸信息，包括offsetLeft、offsetTop属性的使用方法，以及通过自定义函数getPos来计算元素相对于文档左上角的实际位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.　offsetLeft[Top]

　　当前元素到定位父级(即offsetParent)的距离（偏移值）。
　　父级没有定位：
　　offsetParent -> body
　　offsetLeft[Top] -> html

　　父级有定位：
　　ie 7:
　　　　如果自己没有定位，那么offsetLeft[Top]是到body的距离。
　　　　如果自己有定位，那么就是到定位父级的距离。
　　其他：
　　　　到定位父级的距离。

2.元素宽高

　　元素.style.width : 样式宽，带单位；

　　元素.clientWidth : 可视区宽（样式宽 + padding），不带单位；

　　元素.offsetWidth : 占位宽（可视区宽 + border），不带单位；

　　高与宽类似，将width 替换为 height即可。

3.获取元素位置的函数

<!DOCTYPE html>
<html>
<head>
    <title>获取元素的位置</title>
    <meta charset="utf-8">
    <style type="text/css">
        div{padding:30px 40px;}
        #div1{border:2px dashed red;}      
        #div2{border:2px dashed green;}
        #div3{border:2px dashed blue;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                
            </div>            
        </div>
    </div>
    <script type="text/javascript">
        var oDiv3 = document.getElementById('div3');
        var p = getPos(oDiv3);
        function getPos(obj){            
            var pos={"left":0,"top":0};
            while(obj){
                pos.left += obj.offsetLeft;
                pos.top += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return pos;            
        }
        alert(p.left); //弹出92
        alert(p.top); //弹出72
    </script>
</body>
</html>