client* 属性

属性说明

client* 系列属性返回元素的可见区域信息，不包含 border 和滚动条。

• clientWidth - 内容宽度 + padding（不含滚动条）
• clientHeight - 内容高度 + padding（不含滚动条）
• clientLeft - 左边框宽度
• clientTop - 上边框宽度

const element = document.getElementById('box');

console.log(element.clientWidth);   // 可见宽度（不含 border 和滚动条）
console.log(element.clientHeight);  // 可见高度（不含 border 和滚动条）
console.log(element.clientLeft);   // 左边框宽度
console.log(element.clientTop);    // 上边框宽度

示例：对比 offset 和 client

观察 border 和滚动条对结果的影响

总结

• clientWidth/Height 表示可见区域尺寸
• 不包含 border 和滚动条
• clientTop/Left 实际上就是 border 的宽度
• 适用于计算元素的可用显示空间