getComputedStyle
每個元素的css樣式都是在其css樣式聲明對象 [object CSSStyleDeclaration] 上，可以通過各種方法獲取和設置
在使用jquery時，獲取元素的css屬性可以用 $el.css() 獲取，但是，當我們不用jquery這樣方便的類庫時，我們又要如何獲取想要的css屬性值
一般而言，我們會想到 element.style 屬性，但是經過測試，我們可以看到，除了行內設置的 style 屬性可以通過這種方式獲得，其他的內聯、外聯、導入的樣式，都獲取不了；可以看到 element.style 返回的 css樣式聲明對象 包含的內容僅僅是行內設置的 style 屬性
此時，getComputedStyle 方法就發揮作用了，該方法在兩個地方可以找到，window.getComputedStyle === document.defaultView.getComputedStyle -- true ，getComputedStyle 返回的 css樣式聲明對象 包含當前元素最終使用的css屬性[即使你未設置，也會有一個值，比如 border: 0px none rgb(51, 51, 51)，即使你設置了，但是可能不一樣，返回的是最終使用的]，樣式對象 length 可以達到190+（chrome下測試，window.getComputedStyle(a).length = 263）
element.style 和 getComputedStyle 的區別在於兩個地方：
1. 可寫 和 只讀，style返回的對象是可讀可寫的，getComputedStyle是隻讀的
2. 獲取僞類的樣式，getComputedStyle(el, ':after') 可以獲取僞類 :after 的樣式
直接通過屬性值獲取相關屬性時，這裏的屬性值，不同瀏覽器可能不一樣，而且需要使用駝峯表示法，比如：style.borderLeft，這時候可以通過 getPropertyValue 方法獲取， CSSStyleDeclaration.getPropertyValue('property')，並且這裏的屬性不可用駝峯表示法，用分隔符（-）形式
注：getComputedStyle 和 getPropertyValue 的瀏覽器兼容性，IE9+，其他所有瀏覽器；故而，針對IE9以下的瀏覽器，可以使用IE下有的 element.currentStyle 和 getAttribute('駝峯表示法')
getBoundingClientRect
獲取元素上、右、下、左距離瀏覽器視窗的位置
另一種獲取元素位置信息的方法，getBoundingClientRect 方法，通過 element.getBoundingClientRect() 獲取 ClientRect 對象，其包含6個屬性：top、right、bottom、left、width、height，這裏的 right 和 bottom 與css中的屬性含義是不同的：
top：元素上邊緣 距離瀏覽器視窗上邊的距離
right：元素右邊 距離瀏覽器視窗左邊的距離
bottom：元素下邊 距離瀏覽器視窗上邊的距離
left：元素左邊 距離瀏覽器視窗左邊的距離
width：元素寬
height：元素高
getBoundingClientRect最初是在IE私有的，後來加入到了W3C標準中，所有瀏覽器都支持了，不過 IE8 及以下不支持 width、height
可以通過變通的方式獲取： ClientRect.width || right - left，ClientRect.height || bottom - top
還有一個 getClientRect 方法，同 getBoundingClientRect 方法類似，不過 getClientRects 返回的是 ClientRectList 對象，其 [0] === ClientRect
clientHeight、offsetHeight
關於寬、高的總結，client 表示 內容+padding，offset 表示 內容+padding+border, 寬高本身，取決於盒子類型（IE盒子、標準盒子，通過box-sizing設置）
element 本身沒有 height、width 屬性，有 clientHeight、offsetHeight 屬性
clientHeight content + padding
clientWidth content + padding
offsetHeight content + padding + border
offsetWidth content + padding + border
height content (box-sizing: content-box) | content+padding+border (box-sizing: border-box)
width content (box-sizing: content-box) | content+padding+border (box-sizing: border-box)