獲取元素的某一個具體的樣式屬性值
元素.style.屬性名
這需要把元素的樣式都寫在行內樣式上，寫在樣式表(css)中是不行的，會得到空值。
// -> 這需要把元素的樣式都寫在行內樣式上，寫在樣式表(css)中是不行的，會得到空值
console.log(box.style.height); // -> ""
console.log(box.style.width); // -> 行內樣式里width=200px; 得到200px
這種方式不常用，因為為了獲取值而所有樣式都寫在行內(無法實現CSS和HTML的分離)。
使用window.getComputedStyle這個方法獲取所有通過瀏覽器計算過的樣式
所有通過瀏覽器計算過的樣式: 只要當前的元素標簽可以在頁面中呈現出來，那么它的所有的樣式都是經過瀏覽器計算過的(渲染過的) -> 哪怕有些樣式并沒有寫，也可以獲取到。
// -> window.getComputedStyle(當前要操作的元素對象, 當前元素的偽類[一般不用偽類,而使用null])。
// 獲取的結果是CSSStyleDeclaration 這個類的實例: 包含了當前元素的所有樣式屬性和值
console.log(window.getComputedStyle); // 結果是一個function
console.log(window.getComputedStyle(box, null))
console.log(window.getComputedStyle(box, null).height); // 獲得給定元素具體樣式值
方法雖然好用，但是在IE6-8下不兼容。因為window下沒有getComputedStyle這個屬性。得到的結果是undefined。所以在IE6-8下執行這個方法會報錯。
// -> 在IE6-8下可以使用currentStyle來獲取所有經過瀏覽器計算過的樣式
console.dir(box.currentStyle);
獲取當前元素所有經過瀏覽器計算過的樣式中的attr對應的值。
currentElement: [object]當前想要操作的元素對象。
attr: [string]要獲取的樣式的屬性的名稱。
// 使用 try catch 來處理兼容(只有在不得已的情況下才使用這個方法處理兼容)
// -> 前提: 必須保證try中的代碼在不兼容瀏覽器中執行的時候會報錯，這樣才會執行到catch來捕獲異常信息，進行兼容性處理。
// -> 不管當前是什么瀏覽器，都需要先把try中的代碼執行一遍，如果當前是IE7，window.getComputedStyle本身是不兼容的。但是此時仍要將其執行一次，報錯后才在執行currentElement.currentStyle一遍，這樣就會消耗性能。
function getCss(currentElement, attr) {
var val = null;
try {
val = window.getComputedStyle(currentElement, null)[attr];
} catch (e) {
val = currentElement.currentStyle[attr];
}
return val;
}
function getCss(currentElement, attr) {
var val = null;
if (window.getComputedStyle) { // -> 首先獲取屬性值，兼容返回的是一個函數，
// 轉換為布爾是true，不兼容返回的是undefined，轉換為布爾是false
val = window.getComputedStyle(currentElement, null)[attr];
} else { // -> 代表不兼容
val = currentElement.currentStyle[attr];
}
return val;
}
