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

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

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

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

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

HTML中的布局(位置)

在大多数情况下,元素的位置取决于其自身的CSS属性,但在很大程度上取决于其父元素的CSS属性。这里所指的属性主要是paddingmarginborder

比如下面这个简单示例,示例中名为examplediv元素的盒模型视图可以很好地显示这些属性如何影响布局:

#example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
}

盒模型的视觉图如下所示:

通过浏览器开发者工具可以很轻易的看到元素#example的盒模型视图。视图中清晰的表示了paddingmarginborder的值是如何表示的。而且在视图中,可以看到每个CSS属性,以及其对应的值。

#example元素它有borderpadding和滚动条(因为我们显式设置了元素的widthheight,并且将overflow设置为auto)。元素没有margin,因为不是元素本身的一部分,也没有为它提供特殊属性。

如果将#example元素上的各个属性绘制到图形,看起来像下面这样:

上面的图片展示了元素有滚动条的情形,这也是最复杂的情况。有些浏览器(不是所有)通过从内容中获取空间来为它保留空间。

因此,如果没有滚动条,内容(content)的width将是300px,但是如果滚动条的宽度是16px(不同的设备和浏览器的宽度不同,如下图所示),那么内容的width将是300 - 16 = 284px。在具体使用的过程中,我们应该要考虑到这一点。这也就是为什么要举一个带有滚动条的示例。如果没有滚动条,那么事情就会变得简单点。

有关于浏览器滚动条的特性,可以点击这里进行了解

上面的示例,由于我们的元素属于正常的文档流,从浏览器开发者工具中截出的元素盒模型视图,只看到了元素尺寸相关的属性,但并没有看到元素有关于位置的尺寸。如果我们在元素中添加position相关的属性,那么就可以看到。比如下面这个示例:

#container {
    padding: 24px;
    margin: 24px;
    border: 50px #ccc solid;
    left: 10px;
    top: 200px;
    position: absolute;
}

元素#container的盒模型视图如下:

几何结构

元素提供的widthheight和其他几何结构的属性,其值总是数字。它们被假定为以像素为单位。总体情况如下图所示:

其实它有很多属性,我们很难把它们都放在一张图中,我在网上找了一张描述相对全一点的图:

虽然这图上的属性,在CSS的世界中并没有看过,但它们的值很简单,也很容易理解。JavaScript就是通过这些属性来获取元素的位置或元素的尺寸。

让我们从元素的外部开始探索它们。

offsetParent,offsetleft和offsetTop

offsetParentoffsetLeftoffsetTop三个属性是“最外层”的几何结构的属性,因此我们从这几个属性着手开始学习。

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

在大多数实际情况下,可以使用offsetParent获取最近的CSS位置(CSS-Positioned)的祖先。而其中offsetleftoffsetTop提供相对于左上角的xy坐标。

比如下面这个示例,内部的<div>元素具有<main>作为offsetParent,而offsetLeftoffsetTop从左上角移动180px(即向右下角方向移动)。

<main style="position: relative" id="main">
    <article>
        <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
    </article>
</main>

let exampleEl = document.getElementById('example')
console.log(exampleEl.offsetParent)

console.log()输出的结果可以看到,元素#exampleoffsetParentmain元素。通过offsetLeftoffsetTop输出的值为180

特别注意,有几种情况之下,offsetParent返回的值为null

  • 不可见的元素(比如元素设置display:none或元素就不在document中)
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/get-element-position-and-size-using-javascript.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部