dom元素尺寸和位置
學習要點：
1.獲取元素css大小
2.獲取元素實際大小
3.獲取元素周邊大小
本章，我們將主要討論一下頁面中的某乙個元素它的各種大小和各種位置的計算方式，
以便更好的理解。
一、獲取元素的css大小
1.通過style內聯獲取元素的大小
var box = document.getelementbyid('box'); //獲取元素
box.style.width; //200px，空
box.style.height; //200px，空
/*style獲取行內的css大小
*/window.onload = function()
ps：style獲取只能獲取到行內style屬性的css樣式中的寬和高，如果有獲取，如果
沒有則返回空值。
2.通過計算獲取元素的大小
var style = window.getcomputedstyle ? window.getcomputedstyle(box.null) : null || box.currentstyle;
style.width; //1424px、200px、auto
style.height; //18px、200px、auto
window.onload = function()
ps：通過計算獲取元素的大小，無論你是否是 行內、內聯或者鏈結，它經過計算後
得到的結果返回出來。如果本身設定大小，它會返回元素的大小，如果本身沒有設定，
非ie瀏覽器會返回預設的大小，ie瀏覽器返回auto。
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()
ps：cssrules（或rules）只能獲取到內聯和鏈結樣式的寬和高，不能獲取到行內和計算後的樣式。
總結：以上的三種css獲取元素大小的方法，只能獲取元素的css大小，卻不能獲取元素本身實際
的大小。比如加上內邊距、滾動條、邊框之類的。
二、獲取元素實際大小
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）或者沒有設定大小的元素就是尤為麻煩，所以，建議使用的時候
注意。三、獲取元素周邊大小
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中，如果本身父元素是，非ie返回body物件，ie返回html物件。如
果兩個元素巢狀，如果上父元素沒有使用定位position:absolute，那麼offsetparent將返回
body物件或html物件。所以，在獲取offsetleft和offsettop時候，css定位很重要。
如果說，在很多層次裡，外層已經定位，我們怎麼獲取裡層的元素距離body或html元素之間的
距離呢？也就是獲取任意乙個元素距離頁面上的位置，那麼我們可以編寫函式
function offsettop(elemt)
return top;
}function offsetleft(element)
return left;
}3.scrolltop 和 scrollleft
這組屬性可以獲取滾動條被隱藏區域的大小，也可設定定位該區域。
box.scrolltop; //獲取滾動內容上方的位置
box.scrollleft; //獲取滾動條內容左邊的位置
//可以賦值
box.scrolltop = 100;
如果要讓滾動條滾動到最初始的位置，那麼可以寫乙個函式；
function scrollstart(element)
元素的尺寸和位置
1 clientwidth clientheight 元素的可視部分的寬度和高度 也就是css的width加padding 它們不把邊框和滾動條計算在內，也不包括任何可能的滾動。若css中沒有指定元素的高度和寬度 即自適應 則ie中顯示0，而非ie瀏覽器則顯示實際的值 2 offsetwidth o...
元素的尺寸和位置
如果有兩個div巢狀,像這樣 js 獲取這個div var box document.getelementbyid box 通過元素物件的style屬性設定的樣式是行內樣式,所以通過style獲取也是獲取的行內樣式,並不能獲取css設定的樣式值,這時候用 console.log box.style ...
DOM元素尺寸和位置
offsetwidth和offsetheight 可以獲取元素實際大小 width padding border 可以獲取元素的大小，但是不能設定。box.offsetwidth box.offsetheight offsettop和offsetleft 可以獲取當前元素相對于父元素的位置。box....