获取DOM元素到页面顶部的距离,亲测有效版本(转载)
原文: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元素到页面顶部的距离,亲测有效版本(转载)的更多相关文章
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- jquery获取元素到页面顶部距离
jquery获取元素到页面顶部距离的语句为: $(selector).offset().top
- HTML页面滚动时获取离页面顶部的距离2种实现方法
获取离滚动页面的顶部距离有两种方法一是DOM:而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下 方法一:DOM 复制代码 代码如下: <script> window.o ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
随机推荐
- 使用ThoughtWorks.QRCode生成二维码
新建Windows应用程序,加入引用ThoughtWorks.QRCode.dll,编写代码生成二维码. using System; using System.Drawing; using Syste ...
- Android中System.currentTimeMillis()
函数: System.currentTimeMillis(): 功能:产生一个当前的毫秒,这个毫秒事实上就是自1970年1月1日0时起的毫秒数,Date()事实上就是相当于Date(System.cu ...
- Codeforces Educational Codeforces Round 8 A. Tennis Tournament
大致题意: 网球比赛,n个參赛者,每场比赛每位选手b瓶水+裁判1瓶水,所有比赛每一个參赛者p条毛巾 每一轮比赛有2^k个人參加比赛(k为2^k<=n中k的最大值),下一轮晋级人数是本轮每场比赛的 ...
- 数据格式转换 (三)Office文档转HTML
HTML Filter 是由北京红樱枫软件有限公司根据HTML Ver 4.01/CSS式样,研制和开发的MS Office系列文档到HTML转换的通用程序库.便于用户实现对多种文档的统一管 ...
- CoAP与物联网系统
CoAP简单介绍 引自维基百科上的介绍,用的是谷歌翻译... 受约束的应用协议(COAP)是一种软件协议旨在以很easy的电子设备.使他们能够在互联网上进行交互式通信中使用. 它特别针对小型低功率传感 ...
- vue15 自定义元素指令、标签指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- snowflake算法
snowflake算法思考 缘起 为什么会突然谈到分布式唯一id呢?原因是最近在准备使用RocketMQ,看看官网介绍: 一句话,消息可能会重复,所以消费端需要做幂等.为什么消息会重复后续Rocket ...
- 26. Intellij IDEA 启动项目ClassNotFoundException
转自:https://blog.csdn.net/zhw0596/article/details/81388147 使用Intellij IDEA 的过程中,新创建的项目启动时报 严重: Error ...
- 128.C++文件操作小结
打开后缀参数 #include <fstream> #include <iostream> using namespace std; //文本读写 //文件写入 void ma ...
- 使用INSERT…SELECT语法插入记录(三十二)
前面,我们在谈INSERT语句时,使用两种语句:INSERT…SELECT 和 INSERT…VALUES. INSERT…SELECT可以使用子查询.因为在写SELECT时. *** = ...