獲取元素在頁面中的位置

時間 2019-11-17

標籤獲取元素頁面位置简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。