获取元素到浏览器顶部的距离

简介: 文章介绍了两种方法来获取页面元素到浏览器顶部的距离:使用元素的`getBoundingClientRect().top`属性和自定义函数`getElementTop`结合`offsetParent`和`offsetTop`属性。

两种方法
1.元素.getBoundingClientRect().top 方法 直接返回该元素到浏览器顶端的距离
2.

        function getElementTop(el) {
   
            if (el.offsetParent ) {
   
                return this.getElementTop(el.offsetParent ) + el.offsetTop
            }
            return el.offsetTop
        }

如果到页面顶部的距离,需要加上document.body.scrollTop的值

目录
相关文章
|
7月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
66 1
|
7月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
689 0
|
9月前
|
编解码 JavaScript 前端开发
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
96 2
|
JavaScript 测试技术 容器
JQuery 获取元素到浏览器可视窗口边缘的距离
JQuery 获取元素到浏览器可视窗口边缘的距离
144 0
|
前端开发 UED
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
314 0
【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式
|
前端开发
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
124 0
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
|
存储 JavaScript 前端开发
Selenium之操作浏览器、元素等待、窗体切换和弹窗处理
最常用的几个方法: clear() 清除文本,send_keys(*values) 模拟按键输入,click() 单击元素, submit() 用于提交表单,有时候可以与click()方法互换使用。
|
Web App开发 JavaScript 前端开发
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
1319 0
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
判断DOM元素是否出现再浏览器窗口中
几乎所有的项目都要解决这样一个问题:判断一个元素是否出现在浏览器窗口中?因为通过它我们可以极大的优化项目的性能,进而提升用户的的体验。 使用场景及技术分析 所涉及的业务实现,比较常见的就是电商平台或者是图片展示类的网站。
1456 0
|
Web App开发 编解码 JavaScript
JavaScript获取浏览器、元素、屏幕的宽高尺寸
JavaScript获取浏览器、元素、屏幕的宽高尺寸 前言 有时候在获取浏览器、元素、屏幕的尺寸,傻傻分不清。为了让自己清晰认识,能够快速确定自己需要哪个属性,现在把这些尺寸属性整理了一下。 一、浏览器视口的宽高 Window.innerWidth、Window.innerHeight 浏览器视口(viewport)宽度(单位:像素),如果存在滚动条则包括它。
1569 0