当前位置:主页 > 网站优化 >

JavaScript如何获取HTML元素的确切位置和大小

作者: 采集侠 分类: 网站优化 发布时间: 2019-08-16 17:27 阅读量:

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

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

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

HTML中的布局(位置)

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

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

<code class="css"><span class="id">#example</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">300</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">200</span>px;</span></span> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">25</span>px solid <span class="hexcolor">#E8C48F</span>;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">20</span>px;</span></span> <span class="rule"><span class="attribute">overflow</span>:<span class="value"> auto;</span></span> <span class="rule">}</span></span> </code>

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

JavaScript如何获取HTML元素的确切位置和大小

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

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

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

JavaScript如何获取HTML元素的确切位置和大小

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

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

JavaScript如何获取HTML元素的确切位置和大小

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

<code class="css"><span class="id">#container</span> <span class="rules">{ <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">24</span>px;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">24</span>px;</span></span> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">50</span>px <span class="hexcolor">#ccc</span> solid;</span></span> <span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">10</span>px;</span></span> <span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">200</span>px;</span></span> <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute;</span></span> <span class="rule">}</span></span> </code>

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


本文链接地址:http://www.seohuizhou.com/webyouhua/1541.html
上一篇:<<前端开发里你应该了解的数据结构与算法
下一篇:没有下一篇了>>