原文: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. 【Hibernate步步为营】--多对多映射具体解释

    上篇文章具体讨论了一对多映射,在一对多映射中单向的关联映射会有非常多问题,所以不建议使用假设非要採用一对多的映射的话能够考虑使用双向关联来优化之间的关系,一对多的映射事实上质上是在一的一端使用< ...

  2. ubuntu下安装RemixOS双系统(Android x86)

    这篇文章主要讲在怎样在ubuntu下安装RemixOS pc版(Android x86版本号),下面两种做法的思路都适合安装不论什么版本号的Android x86版本号到ubuntu系统上,仅仅须要改 ...

  3. Lesson 1 Basic Concepts: Part 2

    Getting your web site ‘live’ on the Web With the nerd background details under our belts, we can now ...

  4. HDU 1512 左偏树+并查集

    思路: 左偏树里面掺了一些并查集的应用 这里放一份左偏树的代码模板 重点就是merge函数了-- int merge(int k1,int k2){ if(!k1||!k2)return k1+k2; ...

  5. OOM框架AutoMapper基本使用(1)

    OOM顾名思义,Object-Object-Mapping实体间相互转换,AutoMapper也是个老生常谈了,其意义在于帮助你无需手动的转换简单而又麻烦的实体间关系,比如ViewModel和enti ...

  6. 【Uva 10723】Cyborg Genes

    [Link]: [Description] 给你两个串s1,s2; 让你生成一个串S; 使得s1和s2都是S的子列; 要求S最短; 求S的不同方案个数; [Solution] 设两个串的长度分别为n1 ...

  7. androidclient和站点数据交互的实现(基于Http协议获取数据方法)

    androidclient一般不直接訪问站点数据库,而是像浏览器一样发送get或者post请求.然后站点返回client能理解的数据格式,client解析这些数据.显示在界面上.经常使用的数据格式是x ...

  8. Oracle HR 例子用户的建立 10g,11g均可

    Oracle HR 例子用户的建立 10g,11g均可 先将附件(见文章尾部)上的 10 个 .sql 文件放入这个路径中 : $ORACLE_HOME/demo/schema/human_resou ...

  9. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...

  10. 查看activity task相关信息

    可以使用命令 adb shell dumpsys activity 查看的结果如下 ACTIVITY MANAGER PENDING INTENTS (dumpsys activity intents ...