详解各种获取元素宽高及位置的属性

发表于   |   分类于   |   阅读次数

offsetWidth / offsetHeight

offsetWidth

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

1
var offsetWidth = element.offsetWidth;

offsetHeight

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

1
var offsetHeight = element.offsetHeight;

offsetTop / offsetLeft

介绍这两个属性之前，先介绍下 offsetParent 属性，这样有助于理解。

offsetParent

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。

offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

1
var offsetParent = element.offsetParent;

offsetTop

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

1
var offsetTop = element.offsetTop;

offsetLeft

HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。

然而，对于可被截断到下一行的行内元素（如 span），offsetTop 和 offsetLeft 描述的是第一个边界框的位置（使用 Element.getClientRects() 来获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸（使用 Element.getBoundingClientRect 来获取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。

1
var offsetLeft = element.offsetLeft;

clientWidth / clientHeight

clientWidth

Element.clientWidth 是一个只读属性，返回元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

1
var clientWidth = element.clientWidth;

clientHeight

Element.clientWidth 是一个只读属性，对于没有定义 CSS 或者内联布局盒子的元素为0，同时它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算。

1
var clientHeight = element.clientHeight;

clientTop / clientLeft

clientTop

Element.clientTop 是一个只读属性，表示一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。

1
var clientTop = element.clientTop;

clientLeft

Element.clientLeft 是一个只读属性，表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。

1
var clientLeft = element.clientLeft;

innerWidth / innerHeight

innerWidth

window.innerWidth 是一个只读属性，表示浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。

1
var innerWidth = window.innerWidth;

innerHeight

window.innerHeight 是一个只读属性，表示浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条则包括它。

1
var innerHeight = window.innerHeight;

outerWidth / outerHeight

outerWidth

Window.outerWidth 是一个只读属性，表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。

1
var outerWidth = window.outerWidth;

outerHeight

Window.outerHeight 是一个只读属性，表示获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

1
var outerHeight = window.outerHeight;

scrollTop / scrollLeft

scrollTop

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

scrollTop 可以被设置为任何整数值，同时注意：

  • 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为0。
  • 设置scrollTop的值小于0，scrollTop 被设为0
  • 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值
1
2
var  scrollTop = element.scrollTop; // 获取
element.scrollTop = intValue; // 设置

scrollLeft

Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数（这个特性在chrome浏览器中不存在）。

scrollLeft 可以是任意整数，然而：

  • 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0。
  • 如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0。
  • 如果给scrollLeft 设置的值大于元素内容最大宽度，那么scrollLeft 的值将被设为元素最大宽度。
1
2
var  scrollLeft = element.scrollLeft; // 获取
element.scrollLeft = intValue; // 设置

scrollWidth / scrollHeight

scrollWidth

Element.scrollWidth 是一个只读属性，以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。若元素的宽度大于其内容的区域（例如，元素存在滚动条时）, scrollWidth 的值要大于 clientWidth。

1
var scrollWidth = element.scrollWidth;

scrollHeight

Element.scrollHeight 是一个只读属性，它是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

1
var scrollHeight = element.scrollHeight;

scrollX / scrollY

scrollX

返回文档/页面水平方向滚动的像素值，其中 pageXOffset 属性是 scrollY 属性的别名

1
var scrollX = window.scrollX;

完整的获取文档/页面在水平方向已滚动的像素值的兼容性代码：

1
var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;

scrollY

返回文档/页面在垂直方向已滚动的像素值，其中 pageYOffset 属性是 scrollY 属性的别名

1
var scrollX = window.scrollY;

完整的获取文档/页面在垂直方向已滚动的像素值的兼容性代码：

1
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;