首页 > 代码库 > 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----元素的各种位置,尺寸
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。