锐客网

  1. 首页 > it技术 > >

DOM盒子

offset系列 DOM盒子
文章图片
注意事项
【1】所有偏移量属性都是只读的。
【2】如果给元素设置了display:none，则它的偏移量属性都为0。
【3】每次访问偏移量属性都需要重新计算。
client系列 DOM盒子
文章图片
注意事项
【1】所有客户区client属性都是只读的。
【2】如果给元素设置了display:none，则客户区client属性都为0。
【3】每次访问客户区client属性都需要重新计算，重复访问需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能。
scroll系列 scrollHeight
scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分。
scrollWidth
scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分。
【1】没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等。
【2】存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等。
【3】存在滚动条，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性。
scrollLeft和scrollTop是唯一可写的一组属性。
[注意]为scrollLeft和scrollTop赋值为负值时，并不会报错，而是静默失败。
滚动事件
scroll事件是在window对象上发生的，它表示的是页面中相应元素的变化。当然，scroll事件也可以用在有滚动条的元素。
回到顶部
【1】锚点
使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。

回到顶部

【2】scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度。
由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能获取视图的方法。
元素视图 【DOM盒子】元素视图的三个方法，包括getBoundingClientRect()、getClientRects()和elementFromPoint()，提供当前元素节点的大小、它相对于视口(viewport)的位置等信息。但是，各个浏览器返回的对象包含的属性不相同。

    推荐阅读


    上一篇：什么样的人是“湿”人（以下15种症状，请对照自测！）

    下一篇：在妙不可言的时代，做自己