1.通过遍历目标节点、目标节点的父节点,依次溯源。

然后累加这些节点到其最近可定位的祖先节点的距离。向上直到document。

其中,需要使用到节点的offsetTop/offsetLeft属性,来获取节点到最近祖先元素的距离。(position不为static)

需要使用到getComputedStyle来获取节点的计算属性。

代码实现:

function fn(ele) {
let result = {
left: 0,
top: 0
} // 节点display为none时,直接返回
if (window.getComputedStyle(ele).display === 'none') return; function getOffset(node, init) {
// 节点类型
if (node.nodeType !== 1) return; // 定位属性值
const position = window.getComputedStyle(node).position; // 目标节点跳过该判断
if (init !== true && position === 'static') {
getOffset(node.parentNode);
return;
} result.top += node.offsetTop - node.scrollTop;
result.left += node.offsetLeft - node.scrollLeft; // 目标节点为绝对定位,无需递归操作,直接返回
if (position === 'fixed') return; getOffset(node.parentNode);
} getOffset(ele, true); return result;
}

上述代码通过递归实现,当节点类型不等于1时,返回。

当节点position为static时,不进行计算,传入父节点进行递归操作。

当目标节点隐藏时,直接返回0。

2.通过getBoundingClientRect()方法

该方法

代码实现:

function fn(ele) {
let result = {
top: 0,
left: 0
}; if (window.getComputedStyle(ele).display === 'none') return; const docEl = document.documentElement; // 存在该方法时
if (docEl.getBoundingClientRect) {
result = ele.getBoundingClientRect()
return {
left: result.left + docEl.scrollLeft - docEl.clientLeft,
top: result.top + docEl.scrollTop - docEl.clientTop
}
} return result;
}

其中scrollLeft/scrollTop为窗口的水平垂直的滚动距离。

clientLeft/clientTop为元素边框的宽度。

模仿jquery--offset方法。原生JS获取任意元素到文档document顶部的距离的更多相关文章

  1. PyRevit开发第一步:获取Revit文档Document

    1.安装PythonShell插件 PythonShell 2018 插件下载 交流QQ群: 17075104 新建项目后,运行功能Python Shell, 在弹出的窗口中复制或输入以下引用代码模块 ...

  2. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  3. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  4. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  5. 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  6. 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  7. 放弃jQuery,使用原生js吧!

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  8. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  9. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

随机推荐

  1. 七年老运维实战中的 Shell 开发经验总结【转】

    无论是系统运维,还是应用运维,均可分为“纯手工”—> “脚本化”—> “自动化”—>“智能化”几个阶段,其中自动化阶段,主要是将一些重复性人工操作和运维经验封装为程序或脚本,一方面避 ...

  2. xgboost 算法总结

    xgboost有一篇博客写的很清楚,但是现在网址已经失效了,之前转载过,可以搜索XGBoost 与 Boosted Tree. 现在参照这篇,自己对它进行一个总结. xgboost是GBDT的后继算法 ...

  3. Create table as select

    create table xxx as select create table table1 =; 根据table2的表结构,创建tables1 create table table1 as sele ...

  4. django web问题

    django生命周期 1. 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者post,体现在url之中. ...

  5. 双写mq后碰到没有消费问题记录

    上周双写mq后碰到遇到个问题,mq双写的一台机器有produce,另一台一直没有,但是有的那台机器没有消费者,导致另一个服务 一直没有可以消费的mq.原因是 mq在双写初始化配置的时候两个类文件重复了 ...

  6. locale区域语言设置

    查看当前配置 # 默认配置[maintain@localhost:~]$ locale LANG=zh_CN.utf8 LC_CTYPE="zh_CN.utf8" LC_NUMER ...

  7. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  8. webx入门

  9. Fineui alert去掉关闭按钮,去掉X

    参考:http://fineui.com/bbs/forum.php?mod=viewthread&tid=7455&highlight=alert           http:// ...

  10. [Windows] - 在 Windows Server 2019 找不到无线网卡 之解决

    硬件:Intel® Dual Band Wireless-AC 3165系统:Windows Server 2019 问题:新系统安装完成后,无法找到无线网卡 尝试:适用于 Windows Serve ...