我是瘦子

Web Api 相关接口

发表于 | 阅读次数 | 本文总阅读量 次

HTMLElement

HTMLElement.offsetWidth

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

语法

1
2
// 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
var offsetWidth = element.offsetWidth;

这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用 element.getBoundingClientRect()

HTMLElement.offsetHeight

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

语法

1
2
// 返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
var offsetWidth = element.offsetHeight;

这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 element.getBoundingClientRect()

HTMLElement.clientWidth

引自MDN：内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。

语法

1
2
// 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）和垂直滚动条（如果有的话）
var intElemClientWidth = element.clientWidth;

示例
Dimensions-client

HTMLElement.clientHeight

引自MDN：这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

语法

1
2
// 返回元素的高度（包括元素高度、内边距，不包括水平滚动条、边框和外边距）
var h = element.clientHeight;

示例
Dimensions-client