DOM系列：获取元素位置和尺寸

最新推荐文章于 2024-07-08 11:32:20 发布
最新推荐文章于 2024-07-08 11:32:20 发布
阅读量618 收藏
点赞数
文章标签： css javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xifanxiaochaorou/article/details/123546600
版权

原文地址:DOM系列：获取元素位置和尺寸_慕课手记

对于每一位Web开发的同学而言，在CSS的世界当中，每一个元素都是一个盒子，都有描述盒子大小和位置的相关属性。比如CSS的盒模型相关的属性和position相关属性。不过今天我们学习和聊的不是CSS的世界，而是来学习和聊JavaScript中怎么获取元素尺寸和位置。

在JavaScript中也有很多属性允许我们读取有关元素的width、height和其他几何特性的信息。对于元素的位置获取和控制，在JavaScript中与CSS有所不同，移动或定位元素时，经常需要它们来正确地计算坐标。

在这篇教程中，将学习JavaScript如何获取HTML元素的确切位置和大小，并了解它们的工作原理。

offsetParent,offsetleft和offsetTop

offsetParent、offsetLeft和offsetTop三个属性是“最外层”的几何结构的属性，因此我们从这几个属性着手开始学习。

**offsetParent**：返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则offsetParent为最近的table元素对象或根元素（标准模式下为<html>元素，怪异模式下为<body>元素）。当元素的style.display设置为none或position为fixed时，offsetParent返回null。

在大多数实际情况下，可以使用offsetParent获取最近的CSS位置（CSS-Positioned）的祖先。而其中offsetleft和offsetTop提供相对于左上角的x和y坐标。

比如下面这个示例，内部的<div>元素具有<main>作为offsetParent，而offsetLeft和offsetTop从左上角移动180px（即向右下角方向移动）。


作者：繁花如伊
链接：https://www.imooc.com/article/50774
来源：慕课网

xifanxiaochaorou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript获取DOM元素位置和尺寸
pepping798的专栏
10-26 1973
clientHeight和clientWidth描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分。 clientHeight就是div的高度+上下的padding，clientWidth同理 offsetHeight和offsetWidth描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分。 offsetHeight是client
DOM元素获取位置信息各类方法图示
叹之
03-23 1274
getBoundingClientRect 用法 domRect = element.getBoundingClientRect(); 图解 The returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width. 返回值是一个DOMRect对象，该对象是包含这个元素的最小矩形，
获取Dom位置信息
weixin_43456275的博客
03-11 645
let e = document.querySelector('.zzc') console.log('offsetWidth',e.offsetWidth)//宽（包含border） console.log('offsetHeight',e.offsetHeight)//高（包含border） console.log('clientHeight',e.clientHeight)//可视区域的高度（不包含border） console.log('offsetHeight',e.offse..
获取dom的位置信息
fangwenzheng88的博客
05-25 1741
dom.getBoundingClientRect(); //获取当前dom的位置信息 { bottom:118, height:118, left:0, right:720, top:0, width:720, x:0, y:0, } SVGElement.getBBox() ; getBBox() 获得的为元素在当前SVG坐...
获取Dom元素的X/Y坐标
桂林哈秋 - 我想学编程
10-03 5079
文章来自：http://www.alibuybuy.com/10249.html现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下——注册鼠标移动事件——捕获鼠标正键抬起——注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 470
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
jQuery学习3：操作元素属性和特性
10-29
总的来说，jQuery提供了一系列便捷的方法来操作HTML元素的属性、内容和尺寸，极大地简化了DOM操作。通过熟悉并掌握这些方法，开发者能够更高效地编写动态交互的Web页面。在实际开发中，结合JavaScript的原生方法，...
图解JQUERY对尺寸及位置的定义(图文讲解)
09-25
jQuery 是一个广泛使用的JavaScript库，它提供了一系列便捷的方法来处理网页中的DOM元素，包括尺寸和位置的获取与操作。在本文中，我们将深入探讨jQuery如何定义元素的尺寸和位置，并通过具体的函数解释它们的用途。...
javascript-DOM:镭火箭-Problemática09
04-05
- 获取元素：使用`document.getElementById`、`document.querySelector`或`document.querySelectorAll`来选取特定元素。 - 输入值获取：通过`.value`属性获取表单元素的值，如`inputElement.value`。 - 错误提示...
jquery对dom的操作常用方法整理
10-27
DOM是HTML和XML文档的结构表示，jQuery 提供了一系列便捷的方法来处理DOM元素，包括内容的增删改查、CSS操作以及尺寸获取等。以下是关于jQuery对DOM操作的一些关键知识点： 1. **文本操作**： - `text()`：这个...
YAHOO.util.Dom.rar_YAHOO.util_YAHOO.util.Dom.chm_yahoo.util同步
09-23
3. 元素位置与尺寸： - `getXY(element)`：获取元素相对于视口的位置坐标。 - `setXY(element, xy)`：设置元素的位置坐标。 - `getWidth(element)`和`getHeight(element)`：获取元素宽度和高度。 - `setWidth...
DOM元素的尺寸和位置
youhebuke225的博客
05-25 371
目录DOM元素的尺寸和位置1.尺寸1.1 尺寸API1.2 获取视口的尺寸2. 位置2.1 位置API2.2 getBoundingClientRect()3. 滚动元素3.1 API DOM元素的尺寸和位置 1.尺寸 我们首先准备好一个盒子 #box{ width: 200px; height: 200px; padding: 100px; border: 20px solid black; margin: 10px; background-color: red; } 1.1 尺寸API
DOM元素与位置的关系
woshishui099的博客
10-30 114
DOM元素与位置的关系
JS获取DOM元素的八种方法(含代码,简单易懂)
m0_74577714的博客
09-16 4348
六种获取元素的方法
获取元素在页面中位置
weixin_30918415的博客
11-22 388
1.通过元素的offsetLeft和offsetTop var domObj = docunment.getElementById('dom'); domObj.offsetLeft;//10 domObj.offsetTop;//10 　　在这里，dom元素的offsetLeft、offsetTop指的是元素相对于其offseParent指定的坐标来说的。offsetPare...
获取dom元素的方法
m0_61696809的博客
02-21 4173
如果页面上有多个 class 为 myClass 的元素，则可以通过 document.getElementsByClassName('myClass') 来获取这些元素。如果页面上有多个 class 为 myClass 的元素，则可以通过 document.querySelectorAll('.myClass') 来获取这些元素。如果页面上有一个 class 为 myClass 的元素，则可以通过 document.querySelector('.myClass') 来获取该元素。
javaScript:DOM元素的获取（静态/动态获取）
qq_52799985的博客
09-05 1906
dom操作其实在前面的文章中已经用到很多次了，但是一直没有系统性的总结，接下来的几篇文章，主要来总结dom操作以及dom操作相关的案例（小游戏），比如说：选字游戏，连连看，打地鼠，多球碰撞，随机抽签，无缝轮播，原生js绘制时钟等等。二.DOM元素获取的常用方法（重点）
JavaScript中 获取DOM元素尺寸和位置
明天也要努力的博客
02-20 3927
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="
CSS里的几个小知识
最新发布
07-08 224
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
js获取dom中元素的位置
09-13
要获取DOM中元素的位置，可以使用JavaScript的`getBoundingClientRect()`方法。这个方法返回一个包含元素的位置信息的DOMRect对象。DOMRect对象包含了元素的左、上、右、下边界的坐标。以下是一个示例： ```javascript var element = document.getElementById('myElement'); var rect = element.getBoundingClientRect(); console.log('元素左边界的X坐标：', rect.left); console.log('元素上边界的Y坐标：', rect.top); console.log('元素右边界的X坐标：', rect.right); console.log('元素下边界的Y坐标：', rect.bottom); ``` 在上面的代码中，首先通过`document.getElementById()`方法获取到一个具体的元素，然后使用`getBoundingClientRect()`方法获取该元素的位置信息，并将这些信息存储在一个DOMRect对象中。最后，可以通过访问DOMRect对象的属性来获取元素的位置坐标。 请注意，返回的坐标是相对于视口的位置。如果你想要获取相对于文档的位置，可以将`rect.left`和`rect.top`与`window.scrollX`和`window.scrollY`相加。 希望这可以帮助到你！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值