码迷,mamicode.com
首页 > 其他好文 > 详细

放大镜功能准备工作

时间:2018-01-18 17:18:04      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:位置   client   知识点   post   offset   eth   div   parent   设置   

知识点

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

放大镜功能准备工作

标签:位置   client   知识点   post   offset   eth   div   parent   设置   

原文地址:https://www.cnblogs.com/wudandan/p/8310250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!