vue实战教程这本书其实还是很不错的，里面用到了很多新的dom知识，以前只是看了高程3,然后其实一直就在用
jquery进行大大小小的开发。所以突然看到很多都没见过的dom api难免多少感到很惊讶。下面做一点小小的总结~
-
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置
这个其实还是比较实用常见的属性，既可以准确的定位dom元素的位置，还可以知道其大小。
<body>
<div style="color: #505c78;background: #ccc;width: 200px; height: 200px; margin: auto;padding: 20px;border: 1px solid #999;" class="test">Store a newly created resource in storage.</div>
<script>
var div = document.querySelector('.test');
divRect = div.getBoundingClientRect();
console.log(divRect); // {bottom:250,height:242,left:839,right:1081,top:8,width:242,x:839,y:8}
</script>
</body>
通过上面的代码，很容易能得到它的各个属性。但是，真正的你会发现，这个top和buttom,left和right并不是简简单单就是这么。看下面的图：
width和height呢是包括 padding 和 border的，可是不建议用，因为是行内元素就尴尬了。
-
getComputedStyle()方法获取元素所有最终使用的CSS值
- 语法如下：
var style = window.getComputedStyle('元素', '伪类');
//如：
var div = document.querySelector('.test');
var style = window.getComputedStyle(div, ":after");
- 但是第二个参数伪元素兼容性不是很好，连jq封装都没用这个属性了。所以一般第二个参数就为
null
getComputedStyle()方法如名字一样，它只能获取应用元素上的所有css属性，哪怕是写在另外的css文件里，也都能读到。 而普通的style属性，能读能写，不过只能是行内的style。 getPropertyValue可以获取到相关的css属性。
其实，直接getComputedStyle(div, null).float也是可以哒。不过呢，在某些时候就比较折腾了，因为不同的浏览器，这个属性值会有所变化。例如float在火狐上是cssFloat而在IE上是styleFloat。所以为了避免，就直接用getPropertyValue就好啦。
var div = document.querySelector('.test');
var divComputedStyle = getComputedStyle(div, null);
// 打印一下它的 padding-left
console.log(divComputedStyle.getPropertyValue('padding-left'))
// 注意不需要转化为驼峰写法。
-
类似title的弹窗提示
(这里的图标有一点的
padding-right和 padding-top)
// 首先根据第一节的知识点getBoundingClientRect()来获取图标的left和top
var icon = document.querySelector('weibo');
var iconRect = icon.getBoundingClientRect();
// 根据第二节知识点 getComputedStyle() 获取 图标的padding-right 和 padding-top
var iconPright = getComputedStyle(icon, null).getPropertyValue('padding-right');
var iconPTop = getComputedStyle(icon, null).getPropertyValue('padding-top');
// 获取黑色的popover弹窗的 el,等下会用到 offsetWidth 和 offsetHeight
var popover = document.querySelector('popover');
// 最终需要计算出popover的 left 值和 top 值。
var left = iconRect.left + icon.offsetWidth / 2 - popover.offsetWidth / 2 - iconPright / 2 + 'px';
var top = iconRect.top - popover.offsetHeight + iconPtop + 'px';
这样就计算出来啦。其实还是要根据实际情况来的~ 不过大致的思路都是如此的。
