放大镜功能准备工作

知识点

1. 网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）

   document.documentElement.scrollTop和document.documentElement.scrollLeft

2. 网页工作区域的高度和宽度

   document.documentElement.clientHeight和document.documentElement.clientWidth

3. 元素距离文档顶端和左边的偏移值

   DOM元素对象.offsetTop和 DOM元素对象.offsetLeft

其中对于偏移量的属性：

• offsetParent:当前对象的上级层对象
• offsetTop:当前对象到其上层顶部（offsetParent）的距离，不能赋值，如果需要设置对象到页面顶部的距离要用style.top (offsetLeft同理)
• offsetWidth:当前对象的宽度 offsetHeight:当前对象的高度

它与style.width的区别是： 如果宽度为百分比时， style.width返回的是百分比，而offsetWidth返回的是具体的数值 （offsetHeight同理）

获取网页元素的绝对位置：

    getElementTop(element) {
        var actualTop = element.offsetTop;
        var current = element.offsetParent;
        while (current !== null) {
          actualTop += current.offsetTop;
          current = current.offsetParent;
        }
        return actualTop;
      }

    getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualLeft;
　　}