Comprender fundamentalmente las diferentes propiedades de posición y tamaño en el DOM y BOM

Estoy participando en el "Plan Nuggets·Starting"

introducción

Creo que muchos amigos front-end principiantes se han confundido o incluso torturado por los atributos de posición y tamaño en DOM y BOM. Son uno de los conceptos más utilizados en el desarrollo front-end, pero diferentes propiedades tienen usos y métodos de cálculo muy diferentes. En este artículo, profundizaremos en las propiedades de posición y tamaño en el DOM y BOM, brindando a los principiantes una comprensión más completa y a los avanzados la oportunidad de revisar y aprender.

1. Atributos de posición y tamaño en el DOM

DOM es la interfaz de JavaScript para operar páginas web, y su nombre completo es "Modelo de objeto de documento". Su función es convertir una página web en un objeto JavaScript, de modo que se puedan realizar varias operaciones (como agregar y eliminar contenido) con scripts. Introduzcamos los atributos de posición y tamaño en el DOM.

1.1 familia compensada

Aquí hay una descripción general:

Elemento.offsetParent

La offsetParentpropiedad devuelve el elemento principal más cercano al elemento actual y cuya positionpropiedad CSS no es igual . staticNota: Cada elemento tiene un atributo de posición predeterminado que es estático (a menos que se establezca en otro valor de atributo).

 
<div style="position: absolute;">
  <p>
    <span>我是准备获取 offsetParent 属性的子元素 span </span>
  </p>
</div>

En el ejemplo anterior, spanel offsetParentatributo es divel elemento. Tenga en cuenta que si el atributo de todos los nodos superiores de un elemento positiones static, entonces offsetParentel atributo es bodyun elemento.

En los siguientes casos, el valor del atributo offsetParent devolverá nulo:

Si el elemento está oculto (como configurar display:none), offsetParent devuelve nulo.
Si el atributo de posición en el atributo de estilo del elemento es fijo (no hay ningún elemento de referencia en este momento), entonces offsetParent devuelve nulo.

Elemento.offsetLeft，Elemento.offsetTop

有了 offsetParent 的前置知识，offsetLeft 和 offsetTop 就比较好理解了，Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，返回的值为整数类型，单位为像素。

下面两种情况需要注意：

若元素的 style 属性中的 position 属性为 fixed（此时没有参考元素），offsetLeft 表示元素左侧边缘与 viewport（视口）左侧边缘之间的距离。
如果元素处于一个文档流中的隐藏或不可见祖先元素中，则offsetLeft将返回0。

Element.offsetHeight，Element.offsetWidth

offsetHeight: 返回元素的高度，包括padding、border和可选的水平滚动条的高度。也就是说，它返回的值是元素边框框起来的高度（包括边框宽度和padding），而不包括margin区域和滚动条外的空白区域。

offsetWidth: 返回元素的宽度，其他性质和 offsetHeight 相同。

需要注意的是，这些属性返回的值是整数，不包括小数。这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0。

1.2 client 家族

先来张概览图：

Element.clientHeight，Element.clientWidth

clientHeight：返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。除了元素本身的高度，它还包括padding部分，但是不包括border、margin、水平滚动条的高度（如果存在）。

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight。

clientWidth：和 clientHeight 一样，同样只对块级元素有效，也是只包括元素本身的宽度和padding。

Element.clientLeft，Element.clientTop

clientLeft: 返回元素左侧边框的宽度，即border-left的宽度。它不包括内边距(padding)和外边距(margin)的尺寸，也不包括元素的内容区域。

clientTop: 返回元素顶部边框的宽度，即border-top的宽度。它不包括内边距(padding)和外边距(margin)的尺寸，也不包括元素的内容区域。

注意，这两个属性的值始终是整数。

下面几种情况下，clientLeft和clientTop的值为0：

如果元素的边框样式为none。
如果元素被隐藏（例如通过CSS中的display:none属性或visibility:hidden属性）。
如果元素是行内元素（display: inline）。

1.3 scroll 家族

上图先：

Element.scrollHeight，Element.scrollWidth

scrollHeight：返回元素内容区域的完整高度（返回一个整数值，单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。

scrollWidth：返回元素内容区域的完整宽度，其他地方都与scrollHeight属性类似。

这两个属性只读。注意，即使父盒子设置了 overflow: hidden; 隐藏了移出的内容，用 scrollHeight 或 scrollWidth 仍然能返回元素的总高度。

整张网页的总高度可以从document.documentElement或document.body上读取。

 
document.documentElement.scrollHeight
document.body.scrollHeight

Element.scrollLeft，Element.scrollTop

scrollLeft：返回元素内容区域在水平方向上滚动的像素值。可以设置该属性的值以强制元素滚动到指定的像素位置。当没有水平滚动条时，它的值为0。

scrollTop: 返回元素内容区域在垂直方向上滚动的像素值。可以设置该属性的值为强制元素滚动到指定的像素位置。当没有垂直滚动条时，它的值为0。

这两个属性都可读写，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。

 
document.documentElement.scrollLeft
document.documentElement.scrollTop

2. BOM中的位置和大小属性

BOM（浏览器对象模型）指的是Web浏览器提供的一组对象，用于控制浏览器窗口的外观和行为，并且可以访问浏览器本身的信息。下面就介绍一下 BOM 中的位置和大小属性。

上图先：

lista de materiales.png

window.screenX，window.screenY

window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。
window.innerHeight，window.innerWidth

window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。

用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因此可见部分（视口）就变小了。

注意，这两个属性值包括滚动条的高度和宽度。
ventana.outerHeight, ventana.outerWidth

window.outerHeighty window.outerWidthlas propiedades devuelven el alto y el ancho de la ventana del navegador, incluidos los menús y los bordes del navegador (en píxeles). Estas dos propiedades son de solo lectura.
ventana.scrollX, ventana.scrollY

window.scrollXLa propiedad devuelve la distancia de desplazamiento horizontal de la página y window.scrollYla propiedad devuelve la distancia de desplazamiento vertical de la página, ambas en píxeles. Estas dos propiedades son de solo lectura.
ventana.pageXOffset, ventana.pageYOffset

window.pageXOffsetAtributos y window.pageYOffsetatributos, son window.scrollXy window.scrollYalias.
altura.de.la.pantalla.de.la.ventana, ancho.de.la.pantalla.de.la.ventana

La altura y el ancho (en píxeles) de la pantalla en la que reside la ventana del navegador. Este valor se puede considerar constante y no cambiará a menos que se ajuste la resolución del monitor. La resolución del monitor no tiene nada que ver con la configuración del navegador, hacer zoom en la página web no cambiará la resolución.

Artículos históricos:

¿Cómo encontrar y reparar fugas de memoria front-end? - Habilidades detalladas de resolución de problemas y análisis.

Implemente un componente de cajón basado en Vue desde cero

Implementar un componente MessageBox basado en Vue desde cero

referencias:

wangdoc.com/javascript/…