深入解析Web原生API：提升前端开发效率的利器

前言

DOM操作

元素的尺寸与位置

在JavaScript中，设计元素的尺寸和位置的属性较多，这些属性可以帮助我们获取或者设置元素的大小、位置等信息，主要有 👇 几个属性(下述的描述均以*Width来说明)：

1. offsetWidth和offsetHeight

   offsetWidth = content + padding + border
   不包含margin

2. clientWidth和clientHeight

   clientWidth = content + padding
   不包含border与margin

3. scrollWidth和scrollHeight

   内容的总尺寸宽度，包括因滚动而未展示的元素的宽度，也就是整体滚动宽度！

4. offsetLeft和offsetTop

   元素左外边距边缘到其最近的已定位父元素左内边距框边缘的距离

5. scrollLeft和scrollTop

   水平/垂直方向已滚动的像素值

6. getBoundingClientRect()

   html节点的一个方法，而非属性，调用该方法将返回一个对象，该对象包含了top、right、bottom、left、width、height这些与位置相关的属性

这边整理了以下关于尺寸的关系图：

🤔 但是有时候，好像挺多时候获取到的尺寸都是0，这个是什么情况呢？

👉 这是与浏览器的绘制元素的原理有关，因为浏览器绘制html节点的时候，都是先绘制父元素，然后才绘制子元素，假如父元素在不可见或者尺寸为0的情况下，其子元素获取到的尺寸以及位置一般都是0，因为父元素都没有足够的空间来分配给子组件，因此，子组件的尺寸在父组件没有确定下来的情况下，获取到的值都为0

本地存储

异步编程