页面中的各种宽高和滚动位置

一、尺寸获取

1.1 屏幕尺寸

  • window.screen.

1.1 浏览器尺寸

  • window.outerWidth：浏览器宽度

  • window.outerHeight：浏览器高度，包括状态栏、书签等

  • window.innerWidth：内容显示区域宽度，包括滚动轴

  • window.innerHeight：内容显示区域高度，包括滚动轴

1.2viewport 尺寸

viewport 即视口，指的是网页可见尺寸;

  • document.documentElement.clientWidth
  • document.documentElement.clientHeight 不包括滚动轴的宽高；在没有滚动轴的情况下与window.innerWidth和window.innerHeight

1.3 元素的宽度和高度

  • element.offsetWidth：包括 padding 和边框、但不包括水平滚动条和 margin 的高度。
  • element.offsetHeight：包括 padding 和边框、但不包括垂直滚动条和 margin 的宽度。
  • element.clientHeight：包括 padding、但不包括水平滚动条、边框和 margin 的高度。
  • element.clientWidth：包括 padding、但不包括垂直滚动条、边框和 margin 的宽度。
  • element.scrollHeight：包括由于溢出而无法展示在网页的不可见部分；包括 padding，但不包括 border 和 margin
  • element.scrollWidth：包括由于溢出容器而无法显示在网页上的那部分宽度

1.4 元素的滚动偏移

  • clientLeft：等于元素节点左边框（border）的宽度，单位为像素，包括垂直滚动条的宽度，不包括左侧的 margin 和 padding。
  • clientTop：等于网页元素顶部边框的宽度，不包括顶部的 margin 和 padding。
  • scrollLeft：设置或返回水平滚动条向右侧滚动的像素数量
  • scrollTop：设置或返回垂直滚动条向下滚动的像素数量 当页面滑动到底部时：scrollTop == scrollHeight - clientHight

1.5 元素的偏移位置

  • element.offsetParent：当前 HTML 元素的最靠近的、并且 CSS 的 position 属性不等于 static 的父元素。如果没有则为 body 元素
  • element.offsetTop：左上角相对于 offsetParent 的垂直位移
  • element.offsetLeft：左上角相对于 offsetParent 的水平位移 注：计算 offsetTop 和 offsetLeft 的时候，是从边框的左上角开始计算，即 Element 对象的 border 宽度不计入 offsetTop 和 offsetLeft。

二、盒模型

  • getBoundingClientRect()：返回提供当前元素节点的大小、它相对于视口（viewport）的位置等信息的对象，基本上就是 CSS 盒状模型的内容。
    • bottom：元素底部相对于视口的纵坐标。
    • height：元素高度（等于 bottom 减去 top）。
    • left：元素左上角相对于视口的坐标。
    • right：元素右边界相对于视口的横坐标。
    • top：元素顶部相对于视口的纵坐标。
    • width：元素宽度（等于 right 减去 left）。
  • getClientRects()

results matching ""

    No results matching ""