JavaScript里的宽宽高高XXYY，浅谈常用宽高API解析

offsetParent

offsetParent属性返回元素最近的具有定位的祖先元素。如果元素没有定位的祖先元素，则返回null。

const element = document.getElementById("my-element");
const offsetParent = element.offsetParent;

if (offsetParent) {
  console.log(`The offset parent of ${element.id} is ${offsetParent.id}`);
} else {
  console.log(`${element.id} does not have an offset parent.`);
}

clientWidth和clientHeight

clientWidth和clientHeight属性分别返回元素的内容宽度和内容高度。内容宽度是指元素的宽度，不包括边框、内边距和滚动条。内容高度是指元素的高度，不包括边框、内边距和滚动条。

const element = document.getElementById("my-element");
const clientWidth = element.clientWidth;
const clientHeight = element.clientHeight;

console.log(`The client width of ${element.id} is ${clientWidth}px.`);
console.log(`The client height of ${element.id} is ${clientHeight}px.`);

scrollWidth和scrollHeight

scrollWidth和scrollHeight属性分别返回元素的滚动宽度和滚动高度。滚动宽度是指元素的宽度，包括隐藏的内容。滚动高度是指元素的高度，包括隐藏的内容。

const element = document.getElementById("my-element");
const scrollWidth = element.scrollWidth;
const scrollHeight = element.scrollHeight;

console.log(`The scroll width of ${element.id} is ${scrollWidth}px.`);
console.log(`The scroll height of ${element.id} is ${scrollHeight}px.`);

getBoundingClientRect()

getBoundingClientRect()方法返回元素的大小和位置。该方法返回一个DOMRect对象，包含元素的left、top、right、bottom、width和height属性。

const element = document.getElementById("my-element");
const rect = element.getBoundingClientRect();

console.log(`The left position of ${element.id} is ${rect.left}px.`);
console.log(`The top position of ${element.id} is ${rect.top}px.`);
console.log(`The right position of ${element.id} is ${rect.right}px.`);
console.log(`The bottom position of ${element.id} is ${rect.bottom}px.`);
console.log(`The width of ${element.id} is ${rect.width}px.`);
console.log(`The height of ${element.id} is ${rect.height}px.`);

总结

JavaScript提供了丰富的宽高API，可以轻松获取元素的宽高信息。这些API包括offsetParent、clientWidth、clientHeight、scrollWidth、scrollHeight和getBoundingClientRect。通过使用这些API，您可以更好地控制元素的大小和位置，并创建更具交互性的web页面。