获取元素到页面的距离

function getPosition(obj)
{
  var post={l:0,t:0};
  while(obj){
    post.l += obj.offsetLeft;
    post.t += obj.offsetTop;
    obj = obj.offsetParent;    // 关键点
  }
  return post;
}

知识点 offsetParent :

1、元素本身已经定位         如果元素本身已经定位,那么 offsetParent      属性返回此元素已定位父级元素,如没有已定位的父级元素,则返回 BODY 对象
 2、元素没有定位         如果元素没有定位, offsetParent      不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 BODY 

转载于:https://www.cnblogs.com/zhengyan/p/4990714.html

获取元素到页面上的位置相关推荐

  1. JS获取元素在页面的位置

    JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度(width+padding) obj.clientHeight //元素的高度 obj ...

  2. 获取元素到页面顶部的距离_组成网站页面结构的元素有哪些?

    想要做好网站内部优化,必须要了解网站的组成结构,同时也要对网站结构有一个全面的了解.页面结构就是页面内容的格局,是制作页面的重点之一.合理的页面结构不仅有利于搜索引擎的收录,同时还有利于用户体验. 在 ...

  3. jQuery检查某个元素在页面上是否存在

    用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下: if($("#tt").length > 0) {//元素存在时执行的代码 } 具体原 ...

  4. 获取元素到页面顶部的距离_jQuery 操作元素综合案例

    好好学习,天天向上 本章主要内容是:固定导航返回顶部.楼梯效果 1.固定导航返回顶部 效果图: 示例代码: <!DOCTYPE html> <html> <head la ...

  5. vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html 今日热门 今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...

  6. 获取元素在屏幕的相对位置

    element 为当前想获得位置的元素 // 获取提交按钮的位置getPosition(element){// var box = document.getElementById("comm ...

  7. vue获取元素offsetTop,mounted获取不到offsetTop,获取元素距离页面顶边距离

    记录一下开发过程中遇到的坑,今天想做一个功能,当我评论完之后,页面跳到评论区顶部,于是就要获取到评论区距离页面顶部的距离,需要循环获取offsetTop来实现,但是在mounted阶段是无论如何都获取 ...

  8. vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度

    VUE如何实时监听元素距离顶部高度 发布时间:2020-07-30 09:09:43 来源:亿速云 阅读:150 作者:小猪 这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...

  9. 获取元素相对于屏幕的位置

    <div class="div1"></div><script>//返回值是一个包含width height top right bottom ...

最新文章

  1. ThinkPHP 详细介绍
  2. Apache Flink 零基础入门【转】
  3. 全球及中国硝基复合肥市场产销状况与未来运营前景分析报告2022版
  4. java font属性,css font-family属性怎么用
  5. [翻译] JTBorderDotAnimation
  6. sv_labs学习笔记——sv_lab5_下(System Verilog)
  7. linux初学者-DNS集群篇
  8. Java中二进制、十进制、十六进制及ASCII码与String及字节数组与十六进制之间的转换...
  9. 【总结】动态规划 or 组合数学解决棋盘(迷宫)路径问题(持续更新中)
  10. VRRP配置与维护手册-1
  11. __stdcall的作用及今天的坑
  12. mysqldump --set-gtid-purged=OFF
  13. 桌面图标背景色解决方案
  14. led大屏按实际尺寸设计画面_led显示屏尺寸大小的计算方式
  15. 国培南通之行的感悟——(其三)
  16. 为Windows 7的winsxs文件夹瘦身,慎重。
  17. 英语语法 - 可可英语
  18. iOS开发-将UIView置于最上层
  19. 全球及中国散热产业竞争现状与市场价值分析报告2022版
  20. 初次使用 python poetry 包管理模块踩坑

热门文章

  1. Emscripten 单词_免费下载 | 北师大版高中英语教材重点单词汇总(可下载mp3版本)...
  2. 如果不知道前路在哪儿,那就走好眼前路
  3. 信息图形化探索:图形化简历
  4. 关于机器学习的十个实例
  5. python爬虫作业帮_【Python爬虫】01作业
  6. 光流(八)--总结篇
  7. 2022年考研计算机组成原理_6 总线
  8. 大三寒假--算法复习
  9. linux里netstat与ps,理解proc目录与linux进程、ps命令、netstat命令的关系
  10. 归并排序的空间复杂度