1. 偏移尺寸(offset dimensions)

第一组属性涉及偏移尺寸(offset dimensions),包含元素在屏幕上占用的所有视觉空间。元素在页面上的视觉空间由其高度和宽度决定,包括所有内边距、滚动条和边框(但不包含外边距)

  • offsetHeight: 返回自身除外边距(margin)外包括padding、边框、内容区的高度,返回为数值且不带单位
  • offsetLeft,元素左边框外侧距离包含元素左边框内侧的像素数。
  • offsetTop,元素上边框外侧距离包含元素上边框内侧的像素数。
  • offsetWidth,元素在水平方向上占用的像素尺寸,包括它的宽度、垂直滚动条宽度(如果可见)和左、右边框的宽度。
  • offsetParent:返回该元素带有定位的父元素,如果父元素没有定位则向外侧层层查找,,如果都没有定位则返回body

offset.png

要确定一个元素在页面中的偏移量,可以把它的 offsetLeft 和 offsetTop 属性分别与 offsetParent 的相同属性相加,一直加到根元素。下面是一个例子:

  1. function getElementLeft(element) {
  2. let actualLeft = element.offsetLeft;
  3. let current = element.offsetParent;
  4. while (current !== null) {
  5. actualLeft += current.offsetLeft;
  6. current = current.offsetParent;
  7. }
  8. return actualLeft;
  9. }
  10. function getElementTop(element) {
  11. let actualTop = element.offsetTop;
  12. let current = element.offsetParent;
  13. while (current !== null) {
  14. actualTop += current.offsetTop;
  15. current = current.offsetParent;
  16. }
  17. return actualTop;
  18. }

获取鼠标在盒子内的坐标

  1. 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
  2. 首先得到鼠标在页面中的坐标(e.pageX, e.pageY)
  3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
  4. 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐标
  5. 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动
    1. var box = document.querySelector('.box'); //获取元素
    2. box.addEventListener('mousemove', function(e) { //设置鼠标移动事件
    3. var x = e.pageX - this.offsetLeft; //盒子内坐标=鼠标在页面内坐标-盒子距页面距离
    4. var y = e.pageY - this.offsetTop;
    5. this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
    6. })

注意 所有这些偏移尺寸属性都是只读的,每次访问都会重新计算。因此,应该尽量减少 查询它们的次数。比如把查询的值保存在局量中,就可以避免影响性能。


2. 客户端尺寸(client dimensions)

元素的客户端尺寸(client dimensions)包含元素内容及其内边距所占用的空间。客户端尺寸只有两 个相关属性:clientWidth 和 clientHeight。其中,clientWidth 是内容区宽度加左、右内边距宽
度,clientHeight 是内容区高度加上、下内边距高度。
client.png

  • 客户端尺寸实际上就是元素内部的空间,因此不包含滚动条占用的空间。
  • 这两个属性最常用于确定 浏览器视口尺寸,即检测 document.documentElement 的 clientWidth 和 clientHeight。
  • 这两个 属性表示视口(或元素)的尺寸。

注意 与偏移尺寸一样,客户端尺寸也是只读的,而且每次访问都会重新计算.


3. 滚动尺寸(scroll dimensions)

最后一组尺寸是滚动尺寸(scroll dimensions),提供了元素内容滚动距离的信息。有些元素,比如 无须任何代码就可以自动滚动,而其他元素则需要使用 CSS 的 overflow 属性令其滚动。滚动 尺寸相关的属性有如下 4 个。

  • scrollHeight : 没有滚动条出现时时元素内容的总高度(整个内容的宽度,包含溢出部分)
  • scrollLeft : 内容区左侧英寸的像素数,设置这个属性可以改变元素的滚动位置
  • scroolTop : 内容区顶部隐藏的像素数,设置这个属性可以改变元素的滚动位置
  • scrollWidth : 没有滚动条出现时,元素内容的总宽度(整个内容的宽度,包含溢出部分)

浏览器窗口尺寸通常无法满足完整显示整个页面,为此用户可以通过滚动在有限的视口中查看文 档。度量文档相对于视口滚动距离的属性有两对,返回相等的值

  • window.pageXoffset/window. scrollX 文档X轴滚动卷去的内容长度
  • window.pageYoffset/window.scrollY。 文档Y轴滚动卷去的距离

scroll.png

scrollWidth 和 scrollHeight 可以用来确定给定元素内容的实际尺寸。例如,元素是浏 览器中滚动视口的元素。因此,document.documentElement.scrollHeight 就是整个页面垂直方 向的总高度

scrollWidth 和 scrollHeight 与 clientWidth 和 clientHeight 之间的关系在不需要滚动的文档上是分不清的。如果文档尺寸超过视口尺寸,则在所有主流浏览器中这两对属性都不相等, scrollWidth 和 scollHeight 等于文档内容的宽度,而 clientWidth 和 clientHeight 等于视口 的大小。


scrollLeft 和 scrollTop 属性可以用于确定当前元素滚动的位置,或者用于设置它们的滚动位 置。元素在未滚动时,这两个属性都等于 0。如果元素在垂直方向上滚动,则 scrollTop 会大于 0, 表示元素顶部不可见区域的高度。如果元素在水平方向上滚动,则 scrollLeft 会大于 0,表示元素左 侧不可见区域的宽度。因为这两个属性也是可写的,所以把它们都设置为 0 就可以重置元素的滚动位置。

下面这个函数检测元素是不是位于顶部,如果不是则把它滚动回顶部:

  1. function scrollToTop(element) {
  2. if (element.scrollTop != 0) {
  3. element.scrollTop = 0;
  4. }
  5. }
  6. //这个函数使用 scrollTop 获取并设置值。