获取元素在页面中的位置 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取页面元素的位置</title>
	<style>
		div{padding:20px;}
	</style>
</head>
<body>
	<script>
	//页面的实际尺寸
		function getPagearea(){
			if(document.compatMode == 'Backcompat'){
				return {
					width : Math.max(document.body.clientWidth,document.body.scrollWidth),
					height : Math.max(document.body.clientHeight,document.body.scrollHeight)
				}
			}else{
				return {
					width : Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth),
					height : Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)
				}
			}
		}
		//获取元素在页面里的绝对位置
		function getElementLeft(element){
			var actualLeft = element.offsetLeft;
			var current = element.offsetParent;
			while (current !== null){
				actualLeft += current.offsetLeft;
				current = current.offsetParent;
			}
			return actualLeft;
		}
		function getElementTop(element){
			var actualTop = element.offsetTop;
			var current = element.offsetParent;
			while (current !== null){
				actualTop += current.offsetTop;
				current = current.offsetParent;
			}
			return actualTop;
		}
		// 由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用
		//获取元素在页面里的相对位置
		function getElementViewLeft(){
			var actualLeft = element.offsetLeft;
			var current = element.offsetParent;
			while (current !== null){
				actualLeft += current.offsetLeft;
				current = current.offsetParent;
			}
			if(document.compatMode == 'Backcompat'){
				var elementScrollLeft = document.documentElement.scrollLeft;
			}else{
				var elementScrollLeft = document.body.scrollLeft;
			}
			return actualLeft - elementScrollLeft;
		}
		

	</script>
</body>
</html>

　　

posted @ 2018-03-27 16:15  幽竹小妖  阅读(707)  评论(0)    收藏  举报