魏名华

不要偷懒,做更好的自己

Nothing


No Welcome Message

重学前端-25 | 浏览器CSSOM:如何获取一个元素的准确位置

我想,你在最初接触浏览器 API 的时候,应该都有跟我类似的想法:“好想要 element.width、element.height 这样的 API 啊”。 

这样的 API 可以直接获取元素的显示相关信息,它们是非常符合人的第一印象直觉的设计,但是,偏偏 DOM API 中没有这样的内容。 

随着学习的深入,我才知道,这样的设计是有背后的逻辑的,正如 HTML 和 CSS 分别承担了语义和表现的分工,DOM 和 CSSOM 也有语义和表现的分工。 

DOM 中的所有的属性都是用来表现语义的属性,CSSOM 的则都是表现的属性,width 和 height 这类显示相关的属性,都属于我们今天要讲的 CSSOM。

介绍了滚动的监听,有点作用


最后我们来到了本节课一开始提到的问题,我们是否能够取到一个元素的宽(width)和高(height)呢? 

实际上,我们首先应该从脑中消除“元素有宽高”这样的概念,我们课程中已经多次提到了,有些元素可能产生多个盒,事实上,只有盒有宽和高,元素是没有的。