原生JS如何更准确的获取CSS样式

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)