位置 如何获取一个元素相对于视口的位置？

最新推荐文章于 2023-08-21 19:40:57 发布
最新推荐文章于 2023-08-21 19:40:57 发布
阅读量931 收藏
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33466661/article/details/104899737
版权

在开发时，会遇到一些拖动元素的需求
获取元素位置可以使用Element.getBoundingClientRect()
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

它会返回一组read-only值，left，top，right，bottom，x，y，width，height
（文档中有一句话需要注意：Due to compatibility problems (see below), it is safest to rely on only properties left, top, right, and bottom.）

在这里插入图片描述

像树_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
给定一个元素，获取它对于视口的坐标
from_shanghai的博客
08-04 537
当 实际内容 比 视口大，求 一个元素 对视口的坐标 ，要考虑 滚动条 1. clientHeight、clientWidth width + padding（内边距） 2. offsetHeight、offsetWidth width + padding + border 3. offsetTop、offsetLeft 对于很多元素，这些值 是（相对文档的坐标） 元素左上角（...
获取元素相对于视口的位置 Element.getBoundingClientRect() 理解及笔记
浅笑如伤的博客
06-01 3063
1、概念 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 2、语法 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是.
getBoundingClientRect() 获取元素的大小及其相对于视口的位置
lwx931449660的博客
09-14 907
getBoundingClientRect方法返回元素的大小及其相对于视口的位置，该方法没有参数。 返回值是一个对象（DOMRect对象） // 获取视窗的宽度 var doc= win.document.documentElement console.log(doc.getBoundingClientRect()) // 获取位置集合 上述输出内容，即getBoundingClientRect方法返回元素的大小及其相对于视口的位置集合： DOMRect {x: 0, y: 0, width:.
71_固定定位（相对于浏览器视口进行定位）
述安的博客
08-20 526
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。
JavaScript高级编程--元素获取、视口相关、元素几何尺寸和位置
最新发布
retager的博客
08-21 248
DOM 是document object model （文档对象模型 ），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口把文档中的代码翻译成一个对象模型 ，在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等。
Vue获取页面元素的相对位置的方法示例
10-15
首先，`getBoundingClientRect()` 是JavaScript中的一个原生方法，它可以返回一个元素的大小及其相对于视口的位置。但需要注意的是，这个方法返回的位置是相对于浏览器的视口，而不是整个文档。这意味着当页面滚动时...
JavaScript获取指定元素位置的方法
10-24
// 获取元素相对于视口的位置，加上滚动条偏移 var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft; var top = self.getBoundingClientRect().top + document.documentElement...
jquery-scrolltracker:一个 jQuery 插件，用于跟踪指定元素相对于视口的滚动位置，并向描述当前位置的元素添加 CSS 类。 非常适合向元素添加 CSS 过渡，因为它们从视图中消失
06-24
jquery-scrolltracker 一个 jQuery 插件，用于跟踪指定元素相对于视口的滚动位置，并向描述当前位置的元素添加 CSS 类。 非常适合在元素出现/消失时向元素添加 CSS 过渡。演示安装要安装，请将 javascript 文件复制...
JavaScript与JQUERY获取元素的宽、高和位置
10-20
- `getBoundingClientRect()`: 这是JavaScript原生提供的方法，用于获取元素相对于浏览器视口的位置。返回的对象包含了`top`, `left`, `right`, `bottom`, `width`, 和 `height`这些属性，不受父元素定位的影响。 ...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
此外，还有一些其他的属性和方法可以帮助我们获取更复杂的位置信息，比如`getBoundingClientRect()`，它返回一个对象，其中包含了元素相对于视口的顶部、底部、左侧和右侧的距离，这在处理页面滚动时非常有用。...
CSS定位
qq_45353651的博客
10-16 318
CSS
使用JavaScript的getBoundingClientRect()方法获取元素位置信息
weixin_48723799的博客
06-14 1014
是DOM元素的一个方法，返回一个DOMRect对象，其中包含了元素的边界框（bounding box）信息。x：元素左边界相对于视口左边界的距离（即元素的水平偏移量）。y：元素上边界相对于视口上边界的距离（即元素的垂直偏移量）。width：元素的宽度。height：元素的高度。top：元素上边界相对于视口上边界的距离。right：元素右边界相对于视口左边界的距离。bottom：元素下边界相对于视口上边界的距离。left：元素左边界相对于视口左边界的距离。
获取元素在屏幕的相对位置
sunny_day的博客
01-25 5264
 element 为当前想获得位置的元素 // 获取提交按钮的位置 getPosition(element){ // var box = document.getElementById("commit"); // var pos = box.getBound...
JavaScript中getBoundingClientRect()方法详解
weixin_30797199的博客
11-28 679
getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); ...
[js] 事件对象 e.target offsetX clientX pageX
qq_14993591的博客
09-10 639
鼠标相关事件 e.target 触发事件的标签对象 鼠标位置坐标数据 e.offsetX e.offsetY e.clientX e.clientY e.pageX e.pageY 键盘事件 e.key 按键名称,有可能冲突重复 e.keyCode 按键编号,唯一的,不重复的 e.ctrlKey
js 获得元素的自身大小+位置+距离视口的位置
preserveXing的博客
03-04 853
可以获得 元素合适进入页面
Vue 获取鼠标位置坐标
热门推荐
CSDN前端知识共享
07-24 4万+
Vue 获取鼠标位置坐标 在Vue项目中，我们可能有获取鼠标信息的需求来处理业务逻辑。 介绍 下面，我们将通过介绍touch事件，来获取鼠标位置。 事件名 功能 touchstart 鼠标点击时，触发该事件一次。 touchmove 当鼠标移动时，会多次调用该事件。 touchend 当鼠标停止移动时，触发该事件一次。 templ...
Event对象的坐标及距离
xuxiaoping1989的博客
09-27 3375
screenX:鼠标在显示屏幕上的坐标，此时的参照点是屏幕的左上角。 clientX:鼠标在页面显示区域的坐标，参照物是浏览器内容区域的左上角。 注：以上两个都是各浏览器通用的。  pageX:鼠标在页面上的位置，从页面DOCUMENT左上角开始定位，这个可以很方便在整个页面上进行定位。只是IE678不支持，IE9支持。  layerX:鼠标相对于“最近的定位父级”的边界的位置，从bord
js 获取元素相对于页面（可视窗口）的位置，不考虑页面滚动后
PrimaryColor
02-24 2213
有时候，我们处理节点旋转的时候，旋转的角度计算是通过当前点击的位置和被旋转的节点中心点计算出来的。点击的位置是相对于可视窗口的，那么被旋转节点的中心点肯定是相对于可视窗口的（不然当出现滚动条的时候），不然计算的结果就会出现很多问题。 代码： // 获取元素相对于页面文档的位置---------------------------------------------- function getElementPos(el) { if(el.parentNode === null || el.sty
js 如何获取dom元素相对于当前视口的相对偏移
05-26
可以使用元素的 `getBoundingClientRect()` 方法来获取元素相对于视口的位置信息。该方法返回一个包含 left、top、right、bottom、width、height 属性的 DOMRect 对象。 通过获取元素的 `getBoundingClientRect()` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值