DOM 元素尺寸與(yu)位(wei)置
時間：2018-09-26 來源：未知
一.獲取元(yuan)素CSS大(da)小
1.通過(guo)style獲取元素的大小
varbox = document.getElementById('box'); //獲取元(yuan)素
box.style.width;
box.style.height;
PS：style獲取(qu)只(zhi)能(neng)獲取(qu)到行內style屬性的(de)CSS樣式(shi)中(zhong)的(de)寬和(he)高(gao)，如果(guo)有，獲取(qu);如果(guo)沒有，則返回(hui)空。
2.通過計算獲(huo)取元素的大(da)小
varstyle = window.getComputedStyle ?
window.getComputedStyle(box,null) : null || box.currentStyle;
style.width; //1424px、200px、auto
style.height; //18px、200px、auto
PS：通(tong)過計(ji)算獲取元素的大(da)小，無關你是否是行內、內聯或(huo)者鏈接，它經過計(ji)算后得到(dao)的結果(guo)返回出來。如果(guo)本(ben)身設(she)置(zhi)大(da)小，它會返回元素的大(da)小，如果(guo)本(ben)身沒(mei)有設(she)置(zhi)，非IE瀏(liu)覽器(qi)會返回默認(ren)的大(da)小，IE瀏(liu)覽器(qi)返回auto。
3.通過(guo)CSSStyleSheet對(dui)象中(zhong)的cssRules(或rules)屬性(xing)獲取元素大小(xiao)
var sheet =document.styleSheets[0]; //獲取(qu)link或style
var rule = (sheet.cssRules ||sheet.rules)[0]; //獲(huo)取第一條規(gui)則(ze)
rule.style.width;
rule.style.height;
PS：cssRules(或rules)只能獲(huo)取(qu)到內(nei)聯和鏈(lian)接樣(yang)(yang)式的(de)寬和高，不能獲(huo)取(qu)到行內(nei)和計算后的(de)樣(yang)(yang)式。
總(zong)結：以上的(de)三種CSS獲取元素大小的(de)方(fang)法，只能(neng)獲取元素的(de)CSS大小，卻無法獲取元素本身實際的(de)大小。比如加上了內(nei)邊距(padding)、外邊距(margin)、邊框(border)、滾動條(scroll)之后的(de)大小
二.獲取元素實際(ji)大小
測試代碼：
HTML部分：
<body>
<divid="box">
測(ce)(ce)(ce)Div測(ce)(ce)(ce)試(shi)Div測(ce)(ce)(ce)試(shi)Div測(ce)(ce)(ce)試(shi)Div測(ce)(ce)(ce)試(shi)Div測(ce)(ce)(ce)試(shi)Div測(ce)(ce)(ce)試(shi)Div測(ce)(ce)(ce)試(shi)Div
測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div
測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div
測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div測(ce)試Div
測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div測試(shi)(shi)(shi)Div
測(ce)試(shi)(shi)(shi)Div測(ce)試(shi)(shi)(shi)Div測(ce)試(shi)(shi)(shi)Div測(ce)試(shi)(shi)(shi)Div測(ce)試(shi)(shi)(shi)Div測(ce)試(shi)(shi)(shi)Div測(ce)試(shi)(shi)(shi)Div測(ce)試(shi)(shi)(shi)Div
測(ce)(ce)試(shi)(shi)Div測(ce)(ce)試(shi)(shi)Div測(ce)(ce)試(shi)(shi)Div測(ce)(ce)試(shi)(shi)Div測(ce)(ce)試(shi)(shi)Div測(ce)(ce)試(shi)(shi)Div測(ce)(ce)試(shi)(shi)Div測(ce)(ce)試(shi)(shi)Div
測試(shi)Div測試(shi)Div測試(shi)Div測試(shi)Div測試(shi)Div測試(shi)Div測試(shi)Div測試(shi)Div
</div>
</body>
CSS部分：
#box{
width:200px;
height:200px;
background:red;
overflow:scroll;
}
1.clientWidth和clientHeight
這組屬(shu)性可(ke)以獲取元(yuan)(yuan)素可(ke)視區(qu)的大(da)小，可(ke)以得到元(yuan)(yuan)素內容(rong)及(ji)內邊距所占據的空(kong)間(jian)大(da)小。
box.clientWidth; //200
box.clientHeight; //200
PS：返回(hui)了元素大小，但沒有單(dan)(dan)位，默認單(dan)(dan)位是px，如果(guo)設置了其他的單(dan)(dan)位，比如100em之(zhi)類，返回(hui)出來的結果(guo)還會轉換為(wei)px像素。(CSS獲(huo)取的話，是照著你(ni)設置的樣式獲(huo)取)。
PS：對于元素的(de)實際(ji)大小，clientWidth和clientHeight理解方式如(ru)下：
1.增加邊框，無變化(hua)，為(wei)200;
2.增加外邊(bian)距，無(wu)變化，為200;
3.增加滾動條，終值(zhi)等于原本大小(xiao)減去滾動條的大小(xiao)，為(wei)184;
4.增(zeng)加(jia)內邊(bian)距(ju)，終值等(deng)于原本大(da)(da)小(xiao)加(jia)上內邊(bian)距(ju)的大(da)(da)小(xiao)，為220;
PS：如果說沒(mei)有設置任何CSS的寬和(he)高度，那么非IE瀏(liu)覽器會算上滾動(dong)條和(he)內邊距的計算后的大(da)小，而(er)IE瀏(liu)覽器則返回(hui)0。
2.scrollWidth和(he)scrollHeight
這組屬(shu)性可以獲取滾動內(nei)容的元素大小(xiao)。
box.scrollWidth; //200
box.scrollWidth; //200
PS：返回了元素大小，默認(ren)單位是px。如果沒(mei)有設(she)置任何CSS的寬(kuan)和高(gao)度，它會得到計(ji)算(suan)后的寬(kuan)度和高(gao)度。
PS：對于元素的實(shi)際大小，scrollWidth和scrollHeight理(li)解如下
1.增加邊框，不同瀏(liu)覽(lan)器(qi)有不同解釋：
a) Firefox和Opera瀏(liu)覽(lan)器會增加邊框的(de)大小，220 x 220
b) Chrome和Safari瀏覽器會忽(hu)略(lve)邊框大小，200 x 200
c) IE瀏覽(lan)器忽略(lve)邊框并且只顯示它(ta)有效(xiao)內容的(de)高度，200 x 18(單個“測試 Div”的(de)高度為18)
2.增(zeng)加(jia)(jia)內(nei)邊(bian)距，終值(zhi)會等于原(yuan)本(ben)大小加(jia)(jia)上內(nei)邊(bian)距大小，220 x 220，IE為220x 38
3.增(zeng)加滾動(dong)條(tiao)，終值會等于原本大小(xiao)減去滾動(dong)條(tiao)大小(xiao)，184 x 184，IE為184x 18
4.增(zeng)加外邊據，無變化(hua)。
5.增加(jia)(jia)內(nei)容(rong)溢出(若果沒有滾動條，不同瀏(liu)覽器(qi)(qi)兼容(rong)不同，所以加(jia)(jia)上滾動條overflow:scroll;)，Firefox、Chrome和IE獲取實際內(nei)容(rong)高(gao)度(du)，Opera比前三(san)個(ge)瀏(liu)覽器(qi)(qi)獲取的高(gao)度(du)偏(pian)小，Safari比前三(san)個(ge)瀏(liu)覽器(qi)(qi)獲取的高(gao)度(du)偏(pian)大。
3.offsetWidth和offsetHeight(穩(wen)定(ding)，使用頻率高!)
這組屬性可以返回(hui)元素(su)實際大小，包含邊框、內邊距(ju)和滾(gun)動條。
box.offsetWidth; //200
box.offsetHeight; //200
PS：返回了元素(su)大小，默(mo)認單(dan)位是(shi)px。如果沒(mei)有設置任何CSS的(de)寬和高度(du)，他(ta)會得到計(ji)算后的(de)寬度(du)和高度(du)。
PS：對于元素的實(shi)際大小，offsetWidth和offsetHeight理解如(ru)下：
1.增加邊框(kuang)，終(zhong)值會等于原(yuan)本大小加上邊框(kuang)大小，為220;
2.增加(jia)內邊距，終值會等于(yu)原本(ben)大小(xiao)加(jia)上內邊距大小(xiao)，為(wei)220;
3.增加外邊據，無變化;
4.增加滾(gun)動(dong)條，無(wu)變化，不(bu)會減(jian)小;
HTML部分：
<body>
<divid="box">
測試Div
</div>
</body>
CSS部分：
#box{
width:200px;
height:200px;
background:red;
}
PS：對(dui)于元(yuan)素(su)大(da)(da)小(xiao)的獲取(qu)，一般是塊(kuai)級(block)元(yuan)素(su)并(bing)且以設置了CSS大(da)(da)小(xiao)的元(yuan)素(su)較(jiao)為(wei)方便。如果是內(nei)聯元(yuan)素(su)(inline)或者是沒有設置大(da)(da)小(xiao)的元(yuan)素(su)就(jiu)尤為(wei)麻煩，所以，建議使用的時候注意。
三.獲(huo)取元素周邊大(da)小
1.clientLeft和clientTop
這組屬性(xing)可以(yi)獲取(qu)元素(su)設置(zhi)了左邊(bian)框(kuang)和上邊(bian)框(kuang)的大(da)小。
box.clientLeft; //獲取左(zuo)邊(bian)框的長(chang)度
box.clientTop; //獲取上邊(bian)框的長度(du)
PS：目前只提供(gong)了(le)Left和Top這(zhe)組(zu)，并沒有(you)提供(gong)Right和Bottom。如果(guo)四(si)條邊(bian)寬度不同的(de)話(hua)，可(ke)以直接通過計(ji)算后(hou)的(de)樣式獲取(qu)，或(huo)者采用(yong)以上(shang)三(san)組(zu)獲取(qu)元素(su)大小的(de)減法求得。
2.offsetLeft和offsetTop
這(zhe)組屬性(xing)可以獲取當前元(yuan)(yuan)素相對于(yu)父元(yuan)(yuan)素的位置。
box.offsetLeft;
box.offsetTop;
PS：獲取元素(su)當前相對于父元素(su)的位置，好將此元素(su)設置為絕對定位position:absolute;否則不同(tong)的瀏覽器會(hui)有不同(tong)的解釋。
PS：加(jia)(jia)(jia)上(shang)(shang)邊框和內邊距不(bu)會(hui)影響它的位置(zhi)，但加(jia)(jia)(jia)上(shang)(shang)外邊距會(hui)累(lei)加(jia)(jia)(jia)。
box.offsetParent; //得到父元素
PS：offsetParent中(zhong)，如果(guo)本身父元素是，非IE返回(hui)(hui)body對(dui)象(xiang)(xiang)，IE返回(hui)(hui)html對(dui)象(xiang)(xiang)。如果(guo)兩個元素嵌(qian)套，如果(guo)父元素沒有使用定位(wei)(wei)position:absolute，那么offsetParent將返回(hui)(hui)body對(dui)象(xiang)(xiang)或html對(dui)象(xiang)(xiang)。所以，在獲取offsetLeft和(he)offsetTop時候(hou)，CSS定位(wei)(wei)很重要。
如(ru)果說，在很多(duo)層(ceng)次(ci)里(li)，外層(ceng)已(yi)經定位(wei)，我(wo)們怎么獲取(qu)里(li)層(ceng)的(de)(de)元素距(ju)離body或html元素之(zhi)間(jian)的(de)(de)距(ju)離呢?也就是獲取(qu)任意一個元素距(ju)離頁面(mian)上的(de)(de)位(wei)置。那么我(wo)們可以編寫函數，通過不(bu)停的(de)(de)向上回溯獲取(qu)累加來(lai)實(shi)現。代碼如(ru)下：
//只有(you)兩層的(de)情況下:
box.offsetTop+ box.offsetParent.offsetTop;
//如果(guo)多層的話，就必須使用循環或遞歸(gui):
function offsetLeft(element) {
var left = element.offsetLeft; //得到第一層距離
var parent = element.offsetParent; //得到第一個(ge)父元素(su)
while (parent !== null) { //如(ru)果還有上一層(ceng)父元(yuan)素
left += parent.offsetLeft; //把本層(ceng)的(de)距離累加
parent = parent.offsetParent; //得到本(ben)層(ceng)的父元素
} //然后繼續循環
return left;
}
3.scrollTop和(he)scrollLeft
這組屬性可(ke)以獲取滾動(dong)條被隱藏的區(qu)域大小(xiao)，也可(ke)設(she)置(zhi)定位到(dao)該(gai)區(qu)域。
box.scrollTop; //獲取滾動(dong)內容上方(fang)的(de)位(wei)置(就是隱藏的(de)內容的(de)高度)
box.scrollLeft; //獲(huo)取滾動內容左方的位(wei)置
如果要讓滾(gun)動(dong)條滾(gun)動(dong)到初始的位置，那么可以寫一(yi)個函數(shu)：
functionscrollStart(element) {
if (element.scrollTop != 0) element.scrollTop = 0; //賦值為0;
}
