js获取dom元素位置函数

最新推荐文章于 2024-04-12 10:37:55 发布
最新推荐文章于 2024-04-12 10:37:55 发布
阅读量427 收藏 1
点赞数
分类专栏： js
本文链接：https://blog.csdn.net/sufubo/article/details/103629804
版权

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
可以获取

  • height:100
  • width:100
  • bottom:108
  • left:13
  • right:113
  • top:8

这些属性除了width和height都是相对于窗口左上角计算的。由于是当前窗口的属性值，要想获取相对于整个网页的左上角定位值，要给top和left属性加上当前滚动的位置，（通过window.scrollX和window.scrollY)，这样就可以获取与当前滚动无关的值。

为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。

vieber
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript Dom元素获取和添加详解
10-16
在JavaScript中，DOM...理解并熟练掌握DOM元素的获取和添加是JavaScript前端开发的基础，这对于动态操作网页内容、实现交互功能至关重要。正确使用这些方法和属性，可以有效地构建和修改网页结构，提升用户体验。
DOM元素的绝对位置
04-03
下面是一个JavaScript函数示例，用于获取DOM元素的绝对位置： ```javascript function getAbsolutePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || ...
JavaScript中 获取DOM元素尺寸和位置
明天也要努力的博客
02-20 3926
1. 获取元素的 css 大小 1.1 获取元素的行内样式 <script> function boxInfo(){ let box = document.getElementById('box'); let w = box.style.width; let h = box.style.height; console.log(w,h) // 700px 800px } </script> <body> <div id="
JS-获取DOM元素的五种方法
热门推荐
weixin_43937466的博客
09-04 1万+
根据id名获取元素：getElementById;根据标签名获取元素：getElementsByTagName，返回一个数组；根据类名获取元素：getElementsByClassName，返回一个数组；根据name属性值获取元素：getElementsByName，返回一个数组；根据选择器获取元素：querySelector：获取一个元素，推荐使用 用法类似写css；querySelectorAll：返回一个元素数组。more。
JavaScript DOM 元素查找
最新发布
2401_84091468的博客
04-12 590
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
JS获取DOM元素的八种方法(含代码,简单易懂)
m0_74577714的博客
09-16 4343
六种获取元素的方法
Javascript-获取DOM元素的五种方法
Ass12454548的博客
01-15 3972
简介本文主要介绍通过JS获取DOM元素的五种方法:1.根据id名获取元素:getElementById;2.根据标签名获取元素:getElementsByTagName,返回一个数组;3.根据类名获取元素:getElementsBClassName,返回一个数组;4.根据name属性获取元素:getElementsByName,返回一个数组;5.根据选择器获取元素:1.querySelector:获取一个元素,推荐使用,用法类似写css;
JS中如何获取DOM元素
Adios_0403的博客
07-10 335
标准属性：标签天生自带的属性，比如class、id、title等，可以直接使用点语法操作。比如：disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data开头在DOM对象上一律以dataset对象方式获取。
解决vue项目获取dom元素宽高总是不准确问题
10-15
这样，你可以安全地在回调函数内部获取准确的DOM元素尺寸。 补充一下关于Vue中`ref`的使用，`ref`是在模板中定义的一个特殊属性，用于在Vue实例的`$refs`对象中引用DOM元素或组件。例如： ```html ...
JS中获取 DOM 元素的绝对位置实例详解
夕空
05-23 1512
原文：https://www.jb51.net/article/138770.htm 这篇文章主要介绍了JS中获取 DOM 元素的绝对位置，详细介绍了各种获取dom元素绝对位置的方法及对应的兼容性，需要的朋友参考下吧 在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置，例如 本文 左侧的悬浮导航，当页面滚动到它以前会正常地渲染到文档流中，当页面滚动超过了它的位置，就会始终悬浮在左侧。 ...
javaScript:DOM元素的获取（静态/动态获取）
qq_52799985的博客
09-05 1904
dom操作其实在前面的文章中已经用到很多次了，但是一直没有系统性的总结，接下来的几篇文章，主要来总结dom操作以及dom操作相关的案例（小游戏），比如说：选字游戏，连连看，打地鼠，多球碰撞，随机抽签，无缝轮播，原生js绘制时钟等等。二.DOM元素获取的常用方法（重点）
获取dom元素的方法
m0_61696809的博客
02-21 4173
如果页面上有多个 class 为 myClass 的元素，则可以通过 document.getElementsByClassName('myClass') 来获取这些元素。如果页面上有多个 class 为 myClass 的元素，则可以通过 document.querySelectorAll('.myClass') 来获取这些元素。如果页面上有一个 class 为 myClass 的元素，则可以通过 document.querySelector('.myClass') 来获取该元素。
原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
04-13 1425
getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距...
js - DOM - 窗口和页面尺寸发生改变触发的事件和元素位置信息
m0_74417967的博客
06-30 133
JavaScript之DOM的位置、属性、方法
努力学习前端的阿猪
02-04 3010
文章目录前言一、DOM的位置1.1、`getBoundingClientRect()`注意1.2、`element.scrollLeft && element.scrollTop`1.3、`offsetParent && offsetLeft && offsetTop`-元素自身相关的属性（开发中不常用到）1.4、`element.clientTop && element.clientLeft` 前言 前段时间的开发工作涉及
获取dom元素6种实现方式
qwyio的博客
03-29 7029
querySelector document.querySelector('选择器') querySelectorAll document.querySelectorAll('选择器') getElementById document.querySelectorAll('id名') getElementsByClassName document.getElementsByClassName('类名') getElementsByName document.getElementsB
JS操作dom元素（一）——获取DOM节点的六种方式
weixin_44867717的博客
07-06 5882
dom元素
Dom--获取元素的三种方式
BarryLee的博客
07-10 3723
Dom即document，是指显示网页内容的部分，也就是这一块：有三种方式来获取其中的元素，反别是getElementById, getElementsByTagName, getElementsByName&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;dom-获取...
JS-DOM涉及的位置大小属性
伏城之外的博客
09-12 742
DOM涉及的位置属性 DOM元素对象和DOM鼠标事件对象都有描述对象位置的属性。 其中DOM元素对象的位置描述，其实就是定位中的水平和垂直方向偏移描述， DOM鼠标事件对象的位置描述，其实就是鼠标事件对象产生瞬间的鼠标点所在坐标描述。 DOM元素对象的位置属性有：offsetLeft、offsetTop， 这两个属性表示DOM元素对象距离其带有定位的父元素的偏移位置， 如果没有带有定位的父元素，则这两个属性表示DOM元素距离body元素的距离。 <!DOCTYP...
uniapp获取dom元素
09-18
例如，可以使用select()方法选择一个DOM元素，使用boundingClientRect()方法获取DOM元素的位置和大小信息，并使用exec()方法执行操作。示例代码如下： ```javascript uni.createSelectorQuery().select('.my-element...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值