原文:https://blog.csdn.net/u013764814/article/details/83825479

干脆点(博客就应该干脆,少扯皮)

DOM元素有一个属性是offsetTop,表示该元素到父元素顶部的距离。所以最后的答案就是递归将所有的offsetTop加起来。

贴代码!

function getElementToPageTop(el) {
if(el.parentElement) {
return this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
}

没了,就这样

获取DOM元素到页面顶部的距离,亲测有效版本(转载)的更多相关文章

  1. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  2. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  3. HTML页面滚动时获取离页面顶部的距离2种实现方法

    获取离滚动页面的顶部距离有两种方法一是DOM:而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下     方法一:DOM 复制代码 代码如下: <script> window.o ...

  4. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  5. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  6. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  8. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  9. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

随机推荐

  1. Linux Sendfile 的优势

    Sendfile 函数在两个文件描写叙述符之间直接传递数据(全然在内核中操作,传送),从而避免了内核缓冲区数据和用户缓冲区数据之间的拷贝,操作效率非常高,被称之为零拷贝. Sendfile 函数的定义 ...

  2. C语言:具体解释指针

    指针应该算得上是c语言的精华,但也是难点. 非常多教程或者博客都有对其具体的解说与分析. 我这一节的内容,也是解说指针.但我会尽量使用图解的方式,使大家非常easy理解及掌握. 一.基本使用 先来看看 ...

  3. vim 插件之 surround.vim

    surround.vim-这个插件主要是用来插入一些特殊符号的(成对出现) 下载地址 http://www.vim.org/scripts/script.php?script_id=1697 http ...

  4. thinkphp5项目--企业单车网站(四)

    thinkphp5项目--企业单车网站(四) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...

  5. codeforces 357C Knight Tournament(set)

    Description Hooray! Berl II, the king of Berland is making a knight tournament. The king has already ...

  6. java中replaceAll反斜杠\ or java中replaceAll 括号[

    java中replaceAll反斜杠\   String s=new String("this is a \\"); s.replaceAll("\\",&qu ...

  7. 如何解决SQL Server 2008 无法连接到(local)

    打开SQL SERVER配置管理-->SQL SERVER 网络配置-->实例名的协议   将SQLEXPRESS协议中的Named Pipes和 TCP/IP启用.   点击SQL Se ...

  8. SELinux 入门

    几乎可以肯定每个人都听说过 SELinux (更准确的说,尝试关闭过),甚至某些过往的经验让您对 SELinux 产生了偏见.不过随着日益增长的 0-day 安全漏洞,或许现在是时候去了解下这个在 L ...

  9. SpringBoot结合Mybatis 使用 mapper*.xml 进行数据库增删改查操作

    什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索. MyBa ...

  10. Ubuntu安装php

    http://jingyan.baidu.com/article/dca1fa6fadc61ff1a5405244.html