获取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网 ...
随机推荐
- 基于ArcGIS Flex API实现动态标绘(1.2)
动态标绘API 1.2,相较前一版本号(点击进入),该版本号新增对基本标绘符号的支持,包含: 单点.多点.折线.手绘线.多边形.手绘多边形.矩形,并提供对应的编辑功能. 例如以下图所看到的,对多点的编 ...
- Go 语言编程
[课程名称]Go 语言编程 [课程时间]2014年7月30日(周三) 20:50 - 22:00 [课程安排]20:50-21:00 通过邮件地址登录网络课堂 ...
- vue26-2.0循环
3. 循环 2.0里面默认就可以添加重复数据 arr.forEach(function(item,index){ }); 去掉了隐式一些变量 $index $key 之前: v-for="( ...
- 118.类包装器与lambda函数包装器(伪函数实现)
#include <iostream> #include <list> using namespace std; //函数包装器,左边参数右边函数 template<cl ...
- Android Unknown failure (Failure - not installed for 0)
File->Settings->Build,Execuion,Deployment->Instant Run然后把Enable Instant Run to...那一项的勾去掉就好了
- && 的用法
document.body.style.display === "" && (document.body.style.display = "none&qu ...
- Linux下解压缩文件命令总结
---------------------------------------------tar命令: -v 可视化-c 新建包-f 指定文件名(除非你用默认用户名)-x 解压target.tar-r ...
- Codeforces Round #240 (Div. 2) 题解
A: 1分钟题,往后扫一遍 int a[MAXN]; int vis[MAXN]; int main(){ int n,m; cin>>n>>m; MEM(vis,); ; i ...
- Windows系统的关机、休眠和睡眠状态究的区别
原文:Windows系统的关机.休眠和睡眠状态究的区别 相信有些小伙伴跟我一样,对电脑的一些常用操作或名词不太熟悉,今天我们就简单来聊聊电脑的关机.休眠和睡眠状态究竟有何区别吧! 如果你在电脑左下角的 ...
- WEB开发中一些常见的攻击方式及简单的防御方法
WEB开发中一些常见的攻击方式及简单的防御方法 转载:http://blog.csdn.net/seven__________7/article/details/70896913