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

Posted 前端[色色]

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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----元素的各种位置，尺寸的主要内容，如果未能解决你的问题，请参考以下文章

js里关于各种尺寸的获取

#yyds干货盘点# js学习笔记五十BFC规范

js 表格表单元素尺寸和位置

深入学习jQuery元素尺寸和位置操作

js学习笔记23----窗口尺寸及窗口事件

如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸