DOM元素尺寸和位置css
學習要點：
1.獲取元素CSS大小
2.獲取元素實際大小
3.獲取元素周邊大小html
本章，咱們將主要討論一下頁面中的某一個元素它的各類大小和各類位置的計算方式，
以便更好的理解。瀏覽器
1、獲取元素的CSS大小
1.經過style內聯獲取元素的大小
var box = document.getElementById('box'); //獲取元素
box.style.width; //200px，空
box.style.height; //200px，空函數
/*
style獲取行內的css大小
*/
window.onload = function(){
var box = document.getElementById('box');
alert(typeof box.style.width);
alert(box.style.width);
}學習
PS：style獲取只能獲取到行內style屬性的CSS樣式中的寬和高，若是有獲取，若是
沒有則返回空值。htm
2.經過計算獲取元素的大小
var style = window.getComputedStyle ? window.getComputedStyle(box.null) : null || box.currentStyle;對象
style.width; //1424px、200px、auto
style.height; //18px、200px、autoelement
window.onload = function(){
var box = document.getElementById('box');
var style = window.getComputedStyle ? window.getComputedStyle(box , null) : null || box.currentStyle;
alert(style.width);
alert(style.height);
}get
PS：經過計算獲取元素的大小，不管你是不是 行內、內聯或者連接，它通過計算後
獲得的結果返回出來。若是自己設置大小，它會返回元素的大小，若是自己沒有設置，
非IE瀏覽器會返回默認的大小，IE瀏覽器返回auto。it
3.經過CSSStyleSheet對象中cssRules（或rules）屬性獲取元素大小
var sheet = document.styleSheet[0]; //獲取link或style
var rule = (sheet.cssRules || sheet.rules)[0]; //獲取第一條規則
rule.style.width;
rule.style.height;
window.onload =function(){
var sheet = document.styleSheet[0];
var rule = (sheet.cssRules || sheet.rules)[0];
alert(rule.style.width);
alert(rule.style.height);
}
PS：cssRules（或rules）只能獲取到內聯和連接樣式的寬和高，不能獲取到行內和計算後的樣式。
總結：以上的三種CSS獲取元素大小的方法，只能獲取元素的CSS大小，卻不能獲取元素自己實際
的大小。好比加上內邊距、滾動條、邊框之類的。
2、獲取元素實際大小
1.clientWidth和clientHeight
這組屬性能夠獲取元素可視區的大小，能夠獲得元素內容及內邊距所佔據的空間大小。
box.clientWidth; //200
box.clientHeight; //200
PS：返回了元素大小，可是沒有單位，默認單位是px，若是你強行設置了單位，好比100em之類，
它仍是會返回px的大小。（CSS獲取的話，是照着你設置的樣式獲取）。
PS：對於元素的實際大小，clientWidth和clientHeight理解方式以下：
1.增長邊框，無變化，爲200.
2.增長外邊距，無變化，爲200.
3.增長滾動條，最終值等於本來大小減去滾從條的大小，爲184.
4.增長內邊距，最終值等於本來大小加上內邊距的大小，爲220.
PS：若是說沒有設置任何CSS的寬和高度，那麼非IE瀏覽器會算上滾動條和內邊距的計算後的大小，
而IE瀏覽器則返回0.
2.scrollWidth和scrollHeight
這組屬性能夠獲取滾動內容的元素大小。
box.scrollWidth; //200
box.scrollHeight; //200
PS：返回了元素大小，默認單位是px。若是沒有設置任何CSS的寬和高度，它會獲得計算後的寬度和高度。
（Opera瀏覽器的高度會理解爲0）
PS：對於元素的實際大小，scrollWidth和scrollHeight理解以下：
1.增長邊框，不一樣瀏覽器有不一樣的理解：
a） Firefox和Opera瀏覽器會增長邊框的大小，220x220
b）IE、Chrome和Safari瀏覽器會忽略邊框大小，200x200
c）IE瀏覽器只顯示它原本內容的高度，200x18
2.增長內邊距，最終值會等於本來大小加上內邊距大小，220x220，IE爲220x38
3.增長滾動條，最終值會等於本來大小減去滾動條大小，184x184，IE爲184x18
4.增長外邊距，無變化。
5.增長內容溢出，Firefox、Chrome和IE獲取實際內容高度，Opera比前三個瀏覽器獲取的高度偏小，
Safari比前三個瀏覽器獲取的高度偏大。
3.offerWidth和offerHeight
這組屬性能夠返回元素實際大小，包含邊框、內邊距和滾動條。
box.offsetWidth; //200
box.offsetHeight; //200
PS：返回了元素大小，默認單位是px。若是沒有設置任何CSS的寬和高度，他會獲得計算後的
寬度和高度。
PS：對於元素的實際大小，offsetWidth和offsetHeight理解以下：
1.增長邊框，最終值會等於本來大小加上邊框大小，爲220；
2.增長內邊距，最終值會等於本來大小加上內邊距大小，爲220；
3.增長外邊距，無變化；
4.增長滾動條，無變化，不會減少。
PS：對於元素大小的獲取，通常是塊級（block）元素而且以設置了CSS大小的元素較爲方便
。若是時內聯元素（inline）或者沒有設置大小的元素就是尤其麻煩，因此，建議使用的時候
注意。
3、獲取元素周邊大小
1.clientLeft和clientTop
這組屬性能夠獲取元素設置了左邊框和上邊框的大小。
box.clientLeft;
box.clientTop;
PS：目前只提供了Left和Top這組，並無提供Right和Botton。若是四條邊寬度不一樣的話，
能夠直接經過計算後的樣式獲取，或者採用以上三組獲取元素大小的減法求得。
2.offsetLeft和offsetTop
這組屬性能夠獲取當前元素相對於父元素的位置。
box.offsetLeft; //50
box.offsetTop; //50
PS：獲取元素當前相對於父元素的位置，最好將它設置爲定位position:absolute;不然不一樣的瀏
覽器會有不一樣的解釋。
PS：加上邊框和內邊距不會影響它的位置，但加上外邊距會累加。
box.offsetParent; //獲得父元素
PS：offsetParent中，若是自己父元素是<body>，非IE返回body對象，IE返回html對象。如
果兩個元素嵌套，若是上父元素沒有使用定位position:absolute，那麼offsetParent將返回
body對象或html對象。因此，在獲取offsetLeft和offsetTop時候，CSS定位很重要。
若是說，在不少層次裏，外層已經定位，咱們怎麼獲取裏層的元素距離body或html元素之間的
距離呢？也就是獲取任意一個元素距離頁面上的位置，那麼咱們能夠編寫函數
function offsetTop(elemt){
var top = element.offsetTop;
var parent = element.offsetParent;
while(parent !== null){
top += parent.offsetTop;
parent = parent.offsetParent;
}
return top;
}
function offsetLeft(element){
var left = element.offsetLeft;
var parent = element.offsetParent;
while(parent !== null){
left += parent.offsetLeft;
parent = parent.offsetParent;
}
return left;
}
3.scrollTop 和 scrollLeft
這組屬性能夠獲取滾動條被隱藏區域的大小，也可設置定位該區域。
box.scrollTop; //獲取滾動內容上方的位置
box.scrollLeft; //獲取滾動條內容左邊的位置
//能夠賦值
box.scrollTop = 100;
若是要讓滾動條滾動到最初始的位置，那麼能夠寫一個函數；function scrollStart(element){ if(element.scrollTop !=0)element.scrollTop = 0;}