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

代碼如下:
var box = document.getElementById('box'); // 獲得元素;
box.style.width; // 200px;
box.style.height; // 200px;

// PS:style獲取只能取到行內style屬性的CSS樣式中的寬和高,如果有,則獲取;如果沒有則返回空;

2.通過計算獲取元素的大小

代碼如下:
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
style.width; // 200px;

// PS:通過計算獲取元素的大小,無關是行內/內聯或鏈接,它返回經過計算后的結果;
// 如果本身設置大小,它會返回元素的大小;如果本身沒有設置,非IE會返回默認的大小,IE會返回auto;

3.通過CSSStyleSheet對象中的cssRules(或rules)屬性獲取元素的大小;
代碼如下:
var sheet = document.styleSheets[0]; // 獲取link或style;
var rule = (sheet.cssRules || sheet.rules)[0]; // 獲取第一條規則;
rule.style.width; // 200px;

PS:cssRules只能獲取到內聯和鏈接樣式的寬和高,不能獲取到行內和計算后的樣式;

總結:以上三種CSS獲取元素大小的方法,只能獲取元素的CSS大小,卻無法獲取元素本身實際的大小;比如加上內邊距/滾動條/邊框之類的;

二 獲取元素實際大小

1.clientWidth和clientHeight

這組屬性可以獲取元素可視區的大小,包含元素內容及內邊距所占據的空間大小;
box.clientWidth; // 200;
PS:返回了元素大小,但沒有單位,默認單位是px;
PS:對于元素的實際大小,clientWidth和clientHeight理解如下:
1.元素增加邊框,無變化,200;
2.元素增加外邊框,無變化,200;
3.增加滾動條,最終值=原本大小-滾動條大小;184;
4.增加內邊距,最終值=原本大小+內邊距大小;220;
PS:如果沒有設置任何CSS的width和height,那么非IE會算上滾動條和內邊距的計算后的大小;而IE則返回0;

2.scrollWidth和scrollHeight

這組屬性可以獲取沒有滾動條的情況下,元素內容的總高度;
box.scrollWidth;
// PS:返回了元素大小,默認單位是px;如果沒有設置任何CSS的width和height,它會得到計算后的寬度和高度;

3.offsetWidth和offsetHeight

這組屬性可以返回元素實際大小,包含邊框/內邊距和滾動條;
box.offsetWidth; 200
PS:返回了元素大小,默認單位是px;如果沒有設置任何CSS的width和height,它會得到計算后的寬度和高度;
PS:對于元素的實際大小,理解如下:
1.增加邊框,最終值=原本大小+邊框大小;220;
2.增加內邊距,最終值=原本大小+內邊距大小;220;
3.增加外邊據,無變化;
4.增加滾動條,無變化,不會減小;

PS:對于元素大小的獲取,一般是塊級(block)元素并且已設置了CSS大小的元素較為方便;

三 獲取元素周邊大小

1.clientLeft和clientTop
// 這組屬性可以獲取元素設置了左邊框和上邊框的大小;
box.clientLeft; // 獲取左邊框的寬度;

2.offsetLeft和offsetTop(偏移量)

3.scrollTop和scrollLeft

四 getBoundingClientRect()方法

五 小結

1.偏移量(offset dimension):包括元素在屏幕上占用的所有可見的空間;
元素的可見大小由其高度和寬度決定,包括內邊距/滾動條和邊框;
2.客戶區大小(client dimension):指的是元素內容及其內邊距所占據的空間大小;
3.滾動大小(scroll dimension):包含滾動內容的元素的大小;

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com