获取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网 ...
随机推荐
- Ext4.0 经常使用代码整理(一)
一:经常使用工具条上的定义 // 工具条 var toolbar = Ext.create("Ext.Toolbar", { items : [ yearC ...
- 关于nios 中printf 的问题
在nios中,有printf的程序,在线调试没有什么问题,但是下到flash里面,程序跑了一段时间就死掉了!JTAG_UART是阻塞式输出,他只是将数据输出到buffer中,等待你上位机读取,当你的b ...
- thinkphp5项目--企业单车网站(六)
thinkphp5项目--企业单车网站(六) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...
- Android真机调试访问本地服务器(localhost)的解决方案
Android系统把它自己作为了localhost!当连接localhost都是他自己啊.. 囧,在这里晕了好久才发现.. 网上介绍的都是模拟器连接本地服务器的,我试着把链接改为http://10.0 ...
- 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 ...
- 紫书 例题 9-7 UVa 11584 (线性结构上的动态规划)
这道题判断回文串的方法非常的秀! 这里用到了记忆化搜索,因为会有很多重复 同时用kase来区分每一组数据 然后还有用递归来判断回文,很简洁 然后这种线性结构的动态规划的题,就是把 当前的这个数组分成两 ...
- cogs 1755. 爱上捉迷藏
1755. 爱上捉迷藏 ☆ 输入文件:kadun.in 输出文件:kadun.out 简单对比时间限制:0.001 s 内存限制:2 MB [背景] 乃们都玩过赛尔号吧……,那有木有玩 ...
- PreferenceActivity、PreferenceFragment使用
文件夹 文件夹 前言 PreferenceActivity preferences_scenario_1xml Preference Activity 演示 PreferenceFragment xm ...
- [转]LNMP环境下的Web常见问题排查(精品)
来源:http://mp.weixin.qq.com/s? __biz=MjM5NzUwNDA5MA==&mid=200596752&idx=1&sn=37ecae802f32 ...
- linux vim,vi编辑器的基础
在之前我也不知道为什么要学vim和vi编辑器,仅仅是听过别人说这个对与linux非常重要. 先说一下为什么要学习这个编辑器.个人的看书理解. 系统管理员的重要工作就是參与与设置某些重要软件的配置文件, ...