javascript筆記--（第二十二章）DOM元素尺寸和位置

2024-04-27 15:12:29

字體：大中小

來源：轉載

供稿：網友

獲取元素CSS大小

通過style內聯獲取元素的大小

style獲取只能獲取到行內style屬性的CSS樣式中的寬和高，如果有獲取；如果沒有則返回空。

<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div id="box" style="width:100px;"></div></body><script type="text/javascript">	var box = document.getElementById('box');	console.log(box.style.width);//200px	console.log(box.style.height);//??</script></html>通過計算獲取元素的大小
通過計算獲取元素的大小，無關你是否是行內、內聯或者鏈接，它經過計算后得到的結果返回出來。如果本身設置大小，它會返回元素的大小，如果本身沒有設置，非IE瀏覽器會返回默認的大小，IE瀏覽器返回auto。<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title>	<style type="text/css">		#box{			height:200px;		}	</style></head><body>	<div id="box" style="width:100px;"></div></body><script type="text/Javascript">	var box = document.getElementById("box");	var style = window.getComputedStyle ? 		window.getComputedStyle(box, null) : null || box.currentStyle;	console.log(style.width);//100px	console.log(style.height);//200px</script></html>通過css規則獲取元素大小
cssRules(或rules)只能獲取到內聯和鏈接樣式的寬和高，不能獲取到行內和計算后的樣式<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title>	<style type="text/css">		#box{			height:200px;		}	</style></head><body>	<div id="box" style="width:100px;"></div></body><script type="text/javascript">	var sheet = document.styleSheets[0];//獲取link或style	var rule = (sheet.cssRules || sheet.rules)[0];//獲取第一條規則	console.log(rule.style.width);//空	console.log(rule.style.height);//200px</script></html>總結：以上的三種CSS獲取元素大小的方法，只能獲取元素的CSS大小，卻無法獲取元素本身實際的大小。比如加上了內邊距、滾動條、邊框之類的。獲取元素實際大小
clientWidth和clientHeight
是對象的可見寬和高，不包括滾動條等邊線，會隨窗口的顯示大小改變。返回元素大小，但沒有單位，默認單位是px，如果你強行設置了單位，比如100em之類，它還是會返回px的大小<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div id="box" style="width:100px;padding:10px;border:5px"></div></body><script type="text/javascript">	var box = document.getElementById("box");	console.log(box.clientWidth);//120	console.log(box.clientHeight);//20</script></html>如果說沒有設置任何CSS的寬和高度，那么非IE瀏覽器會算上滾動條和內邊距的計算后的大小，而IE瀏覽器則返回0scrollWidth和scrollHeight
是對象的實際內容的寬和高，不包邊線寬度，會隨對象中內容的多少改變<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div id="box" style="border:5px solid red;box-sizing:border-box;width:100px;overflow-y: auto">		test test test test test test test test test 	</div></body><script type="text/javascript">	var box = document.getElementById("box");	console.log(box.clientWidth);//90	console.log(box.clientHeight);//90</script></html>如果沒有設置任何CSS的寬和高度，它會得到計算后的寬度和高度。offsetWidth和offsetHeight
是對象的可見寬和高，包滾動條等邊線，會隨窗口的顯示大小改變。<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div id="box" style="width:100px;padding:10px;border:5px solid red;">aa</div></body><script type="text/javascript">	var box = document.getElementById("box");	console.log(box.offsetWidth);//130	console.log(box.offsetHeight);//48</script></html>如果沒有設置任何CSS的寬和高度，他會得到計算后的寬度和高度獲取元素周邊大小
clientLeft和clientTop
這組屬性可以獲取元素設置了左邊框和上邊框的大小<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body style="margin:0">	<div id="box" style="width:100px;padding:10px;border:5px solid red;border-top-width:10px">aa</div></body><script type="text/javascript">	var box = document.getElementById("box");	console.log(box.clientLeft);//5	console.log(box.clientTop);//10</script></html>offsetLeft和offsetTop
這組屬性可以獲取當前元素相對于父元素的位置<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body style="margin:0;padding: 8px 16px;position: relative;">	<div id="box" style="width:100px;padding:10px;border:5px solid red;border-top-width:10px">aa</div>	<div id="box1" style="position: absolute;left:40px;top: 30px"></div></body><script type="text/javascript">	var box = document.getElementById("box");	console.log(box.offsetLeft);//16	console.log(box.offsetTop);//8	var box1 = document.getElementById("box1");	console.log(box1.offsetLeft);//40	console.log(box1.offsetTop);//30</script></html>獲取元素當前相對于父元素的位置，最好將它設置為定位position:absolute；否則不同的瀏覽器會有不同的解釋scrollTop和scrollLeft
這組屬性可以獲取滾動條被隱藏的區域大小（即元素中的內容超出元素上邊界或者左邊界的那部分），也可設置定位到該區域。元素位置
getBoundingClientRect()。這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body style="margin:0;padding: 8px 16px;position: relative;">	<div id="box" style="width:100px;padding:10px;border:5px solid red;border-top-width:10px">aa</div>	<div id="box1" style="position: absolute;left:40px;top: 30px;width:50px"></div></body><script type="text/javascript">	var box = document.getElementById('box');//獲取元素	console.log(box.getBoundingClientRect().top);//8，元素上邊距離頁面上邊的距離	console.log(box.getBoundingClientRect().right);//146，元素右邊距離頁面左邊的距離	console.log(box.getBoundingClientRect().bottom);//61，元素下邊距離頁面上邊的距離	console.log(box.getBoundingClientRect().left);//16，元素左邊距離頁面左邊的距離	var box1 = document.getElementById('box1');	console.log(box1.getBoundingClientRect().top);//30	console.log(box1.getBoundingClientRect().right);//90	console.log(box1.getBoundingClientRect().bottom);//30	console.log(box1.getBoundingClientRect().left);//40</script></html>注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素