首页 > 代码库 > js学习笔记17----元素的各种位置,尺寸

js学习笔记17----元素的各种位置,尺寸

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>

 

js学习笔记17----元素的各种位置,尺寸