獲取元素的某一個(gè)具體的樣式屬性值
元素.style.屬性名
這需要把元素的樣式都寫在行內(nèi)樣式上猫十，寫在樣式表(css)中是不行的，會(huì)得到空值。
// -> 這需要把元素的樣式都寫在行內(nèi)樣式上，寫在樣式表(css)中是不行的蔼夜，會(huì)得到空值
console.log(box.style.height); // -> ""
console.log(box.style.width); // -> 行內(nèi)樣式里width=200px; 得到200px
這種方式不常用，因?yàn)闉榱双@取值而所有樣式都寫在行內(nèi)(無法實(shí)現(xiàn)CSS和HTML的分離)压昼。
使用window.getComputedStyle這個(gè)方法獲取所有通過瀏覽器計(jì)算過的樣式
所有通過瀏覽器計(jì)算過的樣式: 只要當(dāng)前的元素標(biāo)簽可以在頁面中呈現(xiàn)出來求冷，那么它的所有的樣式都是經(jīng)過瀏覽器計(jì)算過的(渲染過的) -> 哪怕有些樣式并沒有寫，也可以獲取到窍霞。
// -> window.getComputedStyle(當(dāng)前要操作的元素對(duì)象, 當(dāng)前元素的偽類[一般不用偽類,而使用null])匠题。
// 獲取的結(jié)果是CSSStyleDeclaration 這個(gè)類的實(shí)例: 包含了當(dāng)前元素的所有樣式屬性和值
console.log(window.getComputedStyle); // 結(jié)果是一個(gè)function
console.log(window.getComputedStyle(box, null))
console.log(window.getComputedStyle(box, null).height); // 獲得給定元素具體樣式值
方法雖然好用，但是在IE6-8下不兼容但金。因?yàn)閣indow下沒有g(shù)etComputedStyle這個(gè)屬性韭山。得到的結(jié)果是undefined。所以在IE6-8下執(zhí)行這個(gè)方法會(huì)報(bào)錯(cuò)冷溃。
// -> 在IE6-8下可以使用currentStyle來獲取所有經(jīng)過瀏覽器計(jì)算過的樣式
console.dir(box.currentStyle);
獲取當(dāng)前元素所有經(jīng)過瀏覽器計(jì)算過的樣式中的attr對(duì)應(yīng)的值钱磅。
currentElement: [object]當(dāng)前想要操作的元素對(duì)象。
attr: [string]要獲取的樣式的屬性的名稱秃诵。
// 使用 try catch 來處理兼容(只有在不得已的情況下才使用這個(gè)方法處理兼容)
// -> 前提: 必須保證try中的代碼在不兼容瀏覽器中執(zhí)行的時(shí)候會(huì)報(bào)錯(cuò)续搀，這樣才會(huì)執(zhí)行到catch來捕獲異常信息塞琼，進(jìn)行兼容性處理菠净。
// -> 不管當(dāng)前是什么瀏覽器，都需要先把try中的代碼執(zhí)行一遍彪杉，如果當(dāng)前是IE7毅往，window.getComputedStyle本身是不兼容的。但是此時(shí)仍要將其執(zhí)行一次派近，報(bào)錯(cuò)后才在執(zhí)行currentElement.currentStyle一遍攀唯，這樣就會(huì)消耗性能。
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) { // -> 首先獲取屬性值渴丸，兼容返回的是一個(gè)函數(shù)侯嘀，
// 轉(zhuǎn)換為布爾是true，不兼容返回的是undefined谱轨，轉(zhuǎn)換為布爾是false
val = window.getComputedStyle(currentElement, null)[attr];
} else { // -> 代表不兼容
val = currentElement.currentStyle[attr];
}
return val;
}
