原文: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. 使用ThoughtWorks.QRCode生成二维码

    新建Windows应用程序,加入引用ThoughtWorks.QRCode.dll,编写代码生成二维码. using System; using System.Drawing; using Syste ...

  2. Android中System.currentTimeMillis()

    函数: System.currentTimeMillis(): 功能:产生一个当前的毫秒,这个毫秒事实上就是自1970年1月1日0时起的毫秒数,Date()事实上就是相当于Date(System.cu ...

  3. Codeforces Educational Codeforces Round 8 A. Tennis Tournament

    大致题意: 网球比赛,n个參赛者,每场比赛每位选手b瓶水+裁判1瓶水,所有比赛每一个參赛者p条毛巾 每一轮比赛有2^k个人參加比赛(k为2^k<=n中k的最大值),下一轮晋级人数是本轮每场比赛的 ...

  4. 数据格式转换 (三)Office文档转HTML

         HTML Filter 是由北京红樱枫软件有限公司根据HTML Ver 4.01/CSS式样,研制和开发的MS Office系列文档到HTML转换的通用程序库.便于用户实现对多种文档的统一管 ...

  5. CoAP与物联网系统

    CoAP简单介绍 引自维基百科上的介绍,用的是谷歌翻译... 受约束的应用协议(COAP)是一种软件协议旨在以很easy的电子设备.使他们能够在互联网上进行交互式通信中使用. 它特别针对小型低功率传感 ...

  6. vue15 自定义元素指令、标签指令

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. snowflake算法

    snowflake算法思考 缘起 为什么会突然谈到分布式唯一id呢?原因是最近在准备使用RocketMQ,看看官网介绍: 一句话,消息可能会重复,所以消费端需要做幂等.为什么消息会重复后续Rocket ...

  8. 26. Intellij IDEA 启动项目ClassNotFoundException

    转自:https://blog.csdn.net/zhw0596/article/details/81388147 使用Intellij IDEA  的过程中,新创建的项目启动时报 严重: Error ...

  9. 128.C++文件操作小结

    打开后缀参数 #include <fstream> #include <iostream> using namespace std; //文本读写 //文件写入 void ma ...

  10. 使用INSERT…SELECT语法插入记录(三十二)

    前面,我们在谈INSERT语句时,使用两种语句:INSERT…SELECT  和  INSERT…VALUES. INSERT…SELECT可以使用子查询.因为在写SELECT时.  ***  =   ...