元素位置常用总结

getBoundingClientRect()

　　用法简单，返回元素对浏览器视口顶部和左边部的距离（可为负数）以及宽高，单位px，为整数 ；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
		div{
			width: 100px;
			height: 10000px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div id="id"></div>
<script>
	var div = document.getElementById('id');
	console.log(div.getBoundingClientRect());　
</script>
</body>
</html>

　　

　　获取相对于页面的位置需加上滚动条的距离：

var rect = el.getBoundingClientRect()

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

　　然后你就会发现现在不就是jq的$(el).offset()吗？对的没错，就是这玩意。

　　兼容性：在ie7及以下，会有多2px，蛋疼的话写个兼容好了

function jianrongnimei(el){
		var rect = el.getBoundingClientRect();
   		var top = document.documentElement.clientTop; //ie会返回2
    	　　　　 var left= document.documentElement.clientLeft;
	    return{
	        top    :   rect.top - top,
	        bottom :   rect.bottom - top,
	        left   :   rect.left - left,
	        right  :   rect.right - left
	    }
	}

　　同样此方法只能对可见元素（opacity也算可见）起作用（同jq），display：none，以后只能返回0了；老婆买烧烤回来了，下次更



 


　　


 






		

		
posted @ 
2017-05-18 01:17 
danSingle 
阅读(412) 
评论(0) 
 
收藏 
举报