原文: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. C语言typedef struct具体解释

    在C中定义一个结构体要用typedef,如: typedef struct Student { int a; }Stu; 于是在声明变量的时候就能够:Stu stu1;(假设没有typedef就必须用 ...

  2. UVA 12716 GCD XOR(数论+枚举+打表)

     题意:给你一个N,让你求有多少组A,B,  满足1<= B <= A <= N, 且 gcd(A,B) = A XOR B. 思路:首先我们能够得出两个结论: A-B > ...

  3. ACM的算法分类 2015-04-16 14:25 22人阅读 评论(0) 收藏

    初期:  一.基本算法:        (1)枚举. (poj1753,poj2965)       (2)贪心(poj1328,poj2109,poj2586)       (3)递归和分治法.   ...

  4. 分享一个正则 选择html中所有的单标签

    var str = /\B<.+?>/g;

  5. AIX 系统补丁升级步骤

    AIX 系统补丁升级步骤   1.升级之前建议备份 rootvg (推荐) # smit mksysb   2.检查系统版本号 # oslevel -r   3.找到补丁光盘或者下载补丁,上传到服务器 ...

  6. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

  7. CCF模拟题 有趣的数

    有趣的数 时间限制: 1.0s 内存限制: 256.0MB   问题描述 我们把一个数称为有趣的,当且仅当: 1. 它的数字只包含0, 1, 2, 3,且这四个数字都出现过至少一次. 2. 所有的0都 ...

  8. Linux中为XEN网桥绑定物理网卡

    XEN虚拟机会默认将可以连通外网的网卡绑定到xenbr0上, 因此如果需要切换到其他物理网卡上时,需要自己配置脚本或执行命令. 1.添加脚本绑定 a.编写一个脚本,指定网卡与网桥绑定的关系 # vim ...

  9. BZOJ 3671 NOI 2014 随机数生成器 贪心

    题目大意:实在是太难说明了,自己看pdf吧.. 思路:优先依照它说明的方法处理数组,然后为了让数列中尽可能多的出现小的数字,所以1是必需要出现的,这样才干使整个数列的排序后字典序最小. 我们思考,假设 ...

  10. [BZOJ2143]飞飞侠 并查集优化最短路

    链接 题解 首先很容易想到对每个点暴力跑Dijkstra,但是这样边数是 \(N^4\) 的,考虑优化 发现每次松弛的时候,都要把整个地图扫一遍,每个节点都要重复扫很多次,如果我们在一个点不会再被更新 ...