原文地址: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
来源:慕课网