JS中的盒子模型提供的一些列的屬性和方法，獲取頁面中的
內容的寬度和高度：我們設置的width/height這兩個樣式就是內容的寬和高,如果沒有設置height值，容器的高度會根據里面內容自己進行適應，這樣獲取的值就是真實內容的高;如果設置固定的高度了，不管內容是多了還是少了，其實我們的內容的高度值的都是設定的那個值;
真實內容的寬度和高度:這個代指的是實際內容的寬高(和我們設置的height沒有必然的聯系)，例如:我設置高度為200px，如果內容有溢出，那么真是內容的高度是要把溢出內容的高度也要加進來的
1.client系列(當前元素的幾個私有的屬性)
clientWidth/clientHeight:內容的寬度/高度+左右/上下填充
（和內容溢出沒有關系）
clientLeft:左邊框的寬度clientTop：上邊框的高度
(border[Left/Top]Width)
2.offset系列
//->offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下邊框(和內容是否溢出也是沒有任何的關系的)
//->offsetParent:當前元素的父級參照物
//->offsetLeft/offsetTop:當前元素的外邊框距離父級參照物的內邊框的偏移量
3.scroll系列
//->scrollWidth/scrollHeight：和我們的clientWidth/clientHeight一模一樣(前提是:容器中的內容沒有溢出的情況下)
//如果容器中的內容有溢出,我們獲取的結果是如下規則:
scrollWidth：真實內容的寬度(包含溢出)+左填充
scrollHeight：真實內容的高度(包含溢出)+上填充
獲取到的結果都是約等於的值，因為：同一個瀏覽器，我們是否設置overflow='hidden'對於最終結果是有影響的;在不同的瀏覽器中我們獲取到的結果也是不同；
scrollLeft/scrollTop:滾動條卷去的寬度/高度
2、關於JS盒子模型屬性取值的問題
我們通過這個13個屬性值獲取的結果永遠不可能出現小數，都是整數；瀏覽器在獲取結果的時候，還在原來真實結果的基礎上進行四舍五入;
3、關於操作瀏覽器本身的盒子模型信息
clientWidth/clientHeight是當前瀏覽器可視窗口的（一屏幕的寬度和高度）寬度和高度
scrollWidth/scrollHeight是當前頁面的真實寬度和高度(所有屏加起來的寬度和高度但是是一個約等於的值)
我們不管哪些屬性，也不管是什么瀏覽器，也不管是獲取還是設置，想要都兼容的話，需要些兩套
document.documentElement[attr]||document.body[attr];
必須document.documentElement在前
document.documentElement.clientWidth||document.body.clientWidth
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
//編寫一個有關操作瀏覽器盒子模型的方法 //如果只傳遞attr沒有傳遞value，默認的意思獲取 //如果兩個參數都傳遞了，意思是設置 //不嚴謹的來說這就是有關於"類的重載":同一個方法,通過傳遞參數的不同 //實現了不同的功能 function win(attr,value){ if(typeof value ==="undefined"){//沒有傳遞value值 “獲取” return document.documentElement.attr||document.body.[attr]; }//設置 document.documentElement[attr] = value; document.body[attr] = value; } console.log(win("clientHeight")); win("scrollTop",0);
·····························································································································
1、元素.style.屬性名
需要我們把元素的樣式都寫在行內樣式上才可以（寫在樣式表中是不管用的）
console.log(box.style.height);
console.log(box.style.width)
在真實項目中，這種方式不常用，因為我不能為了獲取值而把所有的央視都寫在行內（無法實現css和html的分離）
2、使用window.getComputedStyle這個方法獲取所有經過瀏覽器計算過的樣式
所有經過瀏覽器計算過的樣式:只要當前的元素標簽可以在頁面中呈現出來，那么它的所有央視都是經過瀏覽器計算過的（渲染過的）
哪怕有些樣式你沒有寫,我們也可以獲取到
console.log(window.getComputedStyle);
獲取的結果是CSSStyleDeclaration這個類的一個實例:包含了當前元素的所有樣式屬性和值
console.log(window.getComputedStyle(box,null));
3、方法雖然好用，但是在IE6-8下是不兼容的:因為window下沒有getComputedStyle這個屬性
在IE6-8下執行這個方法會報錯
在IE6-8下我們可以使用currentStyle來獲取所有經過瀏覽器計算過的樣式
console.dir(box.currentStyle);
// window.getComputedStye(box,null).height
box.currentStyle.height
// getCss:獲取當前元素所有經過瀏覽器計算過的樣式中的[attr]對應的值
// curEle:[object]當前要操作的元素對象
//attr:[string]我們要獲取的樣式屬性的名稱
1、使用try、catch來處理兼容
//前提:必須保證try中代碼在不兼容瀏覽器中執行的時候報錯，這樣的話我們才可以用catch捕獲到異常的信息，進行其它的處理
//不管當前是什么瀏覽器，都需要先把try中的代碼執行一遍，如果當前是ie7，window.getComputedStyle本身是不兼容的但是
//我也要先執行一遍，報錯了,在把curEle.currentStyle執行一遍(消耗性能)
function getCss(curEle,attr){，
var val = null;
try{
val = window.getComputedStyle(curEle,null)[attr];
}catch(e){
val = curEle.currentStyle[attr];
}
return val;
}
2.判斷當前瀏覽器中是否存在這個屬性或者方法，存在就兼容，不存在就不兼容
function getCss(curEle,attr){ // 性能略好
var val = null;
if("getComputedStyle" in window){// 如果返回的是true,說明window下
//有getComptedStyle這個屬性 代表兼容
val = window.getComputedStyle(curEle,null)[attr];
}else{
// 不兼容
val = curEle.currentStyle[attr];
}
return val;
}
3.
function getCss(){// 性能不如上面
var val = null;
if(window.getComputedStyle){
val = window.getComputedStyle(curEle,null)[attr];
}else{
val = curEle.currentStyle[attr];
}
}
//通過檢測瀏覽器版本和類型來處理兼容
window.navigator.userAgent
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36
function getCss(curEle,attr){
var val = null;
if(/MSIE(6|7|8)/.test(navigator.userAgent)){
val = curEle.currentStyle[attr];
}else{
val = window.getComputedStyle(curEle,null)[attr];
}
return val;
}
//
function getCss(curEle,attr){
var val = null, reg = null;
if("getComputedStyle" in window){
val = window.getComputedStyle(curEle,null)[attr];
}else{
if(attr==="opacity"){
val = curEle.currentStyle["filter"];
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i/;
val = reg.test(val)?reg.exec(val)[1]/100:1;
// "alpha(opacity=10)" 把獲取到的結果進行剖析，獲取里面的數字，讓數字乘以100才和標准的瀏覽器保持了一致
}else{
val = curEle.currentStyle[attr];
}
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val)?parseFloat(val):val;
}