重学之JavaScript HTML Element 常用API解析 _API

offsetHeight, offsetWidth
htmlElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及css设置的宽度(width)的值。
通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

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

但是，它会受到box-sizing属性的干扰，默认情况相当于box-sizing: content-box;

使用方法
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;var intElemOffsetWidth = document.getElementById(id_attribute_value).offsetWidth;offsetLeft, offsetTop
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 的盒子边界。
<div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>Short span. </span> <span id="long">Long span that wraps withing this div.</span></div><div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"></div><script> var box = document.getElementById("box"); var long = document.getElementById("long");//// long.offsetLeft这个值就是span的offsetLeft. // span是个行内元素，它没有absolute定位，但还是默认offsetParent就是父元素，而不是根 // box.style.left = long.offsetLeft + document.body.scrollLeft + "px"; box.style.top = long.offsetTop + document.body.scrollTop + "px"; box.style.width = long.offsetWidth + "px"; box.style.height = long.offsetHeight + "px";</script>

文章插图

offsetParent
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null 。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。