放大镜功能准备工作

Posted 2020-10-21 wudandan

知识点

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同理）

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

javascript 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;
　　}`