您的位置：首页 > Web前端 > JavaScript

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

2017-02-15 17:17 337 查看

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

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

[b]2.元素宽高[/b]
　　元素.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航