DOM之元素定位
JS实现的大多数特效都需要定位元素，而定位元素不外乎以下几类属性：offset、client、scroll。通过合理使用这些属性，即可轻松实现各种JS动态效果了。
一 offset类
offset 即元素偏移量，该类属性主要用来动态的获取元素的偏移和大小等。
1，距离父元素的偏移
offsetParent：获取有定位属性的父元素。
offsetTop / offsetLeft：获取元素距离有定位的父元素（上/左边框）的偏移量。如果没有带定位属性的父元素，那么以 body （浏览器可视区）为准。
HTML代码：
1 <style> 2 .father{ 3 position:relative; 4 top:100px; 5 left:150px; 6 width:200px; 7 height:200px; 8 } 9 .son{ 10 width:50px; 11 height:50px; 12 margin-top:20px; 13 margin-left:30px; 14 } 15 </style> 16 <div class="father"> 17 <div class="son"></div> 18 </div>
JS代码：
1 var f = document.querySelector('.father'), 2 s =document.querySelector('.son'); 3 4 s.offsetParent; //div.father 5 s.offsetTop; //20 6 s.offsetLeft: //30 7 //注意：offset 返回的数字，没有单位
2，自身的宽高
offsetWidth / offsetHeight
1 s.offsetWidth; //80 2 s.offsetHeight; //70 3 //注意：offsetWidth/Height获取的是元素 content+padding+border的尺寸，不包含margin
这两个属性获取的是元素在页面是中的绝对宽高，不包含被 overflow 属性隐藏的内容部分。
3，动态性
所谓动态的获取，是指：当我们 CSS 使用百分比，em 或者 rem 作为单位时，随着屏幕尺寸的变化，元素的实际大小也会随着变化，然而该属性依然能够正确的计算出元素的实际尺寸。
1 <style> 2 div{ 3 width:80%; 4 } 5 </style> 6 <body> 7 <div></div> 8 <script> 9 var oDiv = document.querySelector('div'); 10 oDiv.offsetWidth;//会动态的返回元素的宽度 11 </script> 12 </div>
二 client类
client 系列属性用于获取元素可视区域相关信息，它可以动态的获取元素的边框大小，元素大小等。
HTML 部分：
1 <style> 2 div{ 3 width:400px; 4 height:400px; 5 border:10px solid #ccc; 6 margin:20px; 7 padding:30px; 8 } 9 </style> 10 <body> 11 <div></div> 12 </body>
1，边框大小
通过 clientTop / clientLeft 获取元素上边框/左边框大小。
1 var oDiv = document.querySelector('div'); 2 oDiv.clientTop; //10 3 oDiv.clientLeft; //10 4 //返回数字，不带单位
JS 只提供了获取上边框和左边框大小的方法，如果想获取下边框和有边框的大小，需要做做减法了：offset 宽高减去左或上边框，再减去下面将要讲到的可视区大小。
2，可视区大小
通过 clientWidth / clientHeight 获取元素可视区大小，包含内容区和 padding，不包含 border 和 margin。
1 oDiv.clientWidth; //460 2 oDiv.clientHeight; //460
三 scroll
scroll 类属性用于动态获取元素内容区实际大小，及当元素内容超出盒子大小并出现滚动条时，元素滚动的距离。
HTML 部分：
1 <style> 2 .wrap{ 3 width:500px; 4 height:800px; 5 overflow:scroll; 6 } 7 .content{ 8 width:800px; 9 height:2400px; 10 } 11 </style> 12 <body> 13 <div class="wrap"> 14 <div class="content"><div> 15 </div> 16 </body>
内容区放置的 div 超出了父元素的大小，设置 overflow:scroll 属性，使父元素出现滚动条。
1，滚动距离
scrollTop / scrollLeft 用于获取元素往下和 往右滚动的距离（出现滚动条时）。
1 element.scrollTop; 2 element.scroolLeft; 3 //当元素内容区出现滚动条时，可以使用他们获取滚动距离 4 window.pageXOffset; 5 window.pageYOffset; 6 //当整个页面出现滚动条时，可以使用这两个属性获取页面的滚动距离
2，实际内容区大小
scrollWidth / scrollHeight 用于获取元素内容区实际的宽高，包含内容区和 padding，不包含 border 和 margin。即使内容区被 overflow 隐藏，该属性依然能正确获取到实际大小。
1 var wrap = document.querySelector('.wrap'); 2 wrap.scrollWidth; //800 3 wrap.scrollHeight; //2400
通过 scroll 类属性可以轻松实现自定义滚动条的功能。
