原文: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. Ext4.0 经常使用代码整理(一)

    一:经常使用工具条上的定义 // 工具条 var toolbar = Ext.create("Ext.Toolbar", {             items : [ yearC ...

  2. 关于nios 中printf 的问题

    在nios中,有printf的程序,在线调试没有什么问题,但是下到flash里面,程序跑了一段时间就死掉了!JTAG_UART是阻塞式输出,他只是将数据输出到buffer中,等待你上位机读取,当你的b ...

  3. thinkphp5项目--企业单车网站(六)

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

  4. Android真机调试访问本地服务器(localhost)的解决方案

    Android系统把它自己作为了localhost!当连接localhost都是他自己啊.. 囧,在这里晕了好久才发现.. 网上介绍的都是模拟器连接本地服务器的,我试着把链接改为http://10.0 ...

  5. A start job is running for Network Manager wait online (29s / no limit) 等待30s解决办法

    电脑安装openSUSE42.3和 Ubuntu16.04 双系统,当电脑插上网线后开机会出现A start job is running for Network Manager wait onlin ...

  6. 紫书 例题 9-7 UVa 11584 (线性结构上的动态规划)

    这道题判断回文串的方法非常的秀! 这里用到了记忆化搜索,因为会有很多重复 同时用kase来区分每一组数据 然后还有用递归来判断回文,很简洁 然后这种线性结构的动态规划的题,就是把 当前的这个数组分成两 ...

  7. cogs 1755. 爱上捉迷藏

    1755. 爱上捉迷藏 ☆   输入文件:kadun.in   输出文件:kadun.out   简单对比时间限制:0.001 s   内存限制:2 MB [背景] 乃们都玩过赛尔号吧……,那有木有玩 ...

  8. PreferenceActivity、PreferenceFragment使用

    文件夹 文件夹 前言 PreferenceActivity preferences_scenario_1xml Preference Activity 演示 PreferenceFragment xm ...

  9. [转]LNMP环境下的Web常见问题排查(精品)

    来源:http://mp.weixin.qq.com/s? __biz=MjM5NzUwNDA5MA==&mid=200596752&idx=1&sn=37ecae802f32 ...

  10. linux vim,vi编辑器的基础

    在之前我也不知道为什么要学vim和vi编辑器,仅仅是听过别人说这个对与linux非常重要. 先说一下为什么要学习这个编辑器.个人的看书理解. 系统管理员的重要工作就是參与与设置某些重要软件的配置文件, ...