获取元素的某一个具体的样式属性值
元素.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;
}
