如何准确获取DOM元素内容区域的宽高尺寸？

方法1：通过clientWidth/clientHeight减去内边距计算（推荐，兼容性好） #

原理：clientWidth本身返回的是「内容区域 + 左右内边距」的总宽度，只需减去左右内边距就能得到纯内容区域宽度，高度计算逻辑同理，该方法不需要关心元素的box-sizing设置，通用性更强。

const getContentSize = (elem) => {
  // 拿到元素的计算样式
  const computedStyle = window.getComputedStyle(elem);
  // 把px格式的样式值转成可计算的数字
  const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
  const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
  const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
  const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;

  return {
    contentWidth: elem.clientWidth - paddingLeft - paddingRight,
    contentHeight: elem.clientHeight - paddingTop - paddingBottom
  };
}

// 调用示例
const elem = document.querySelector('div');
const { contentWidth, contentHeight } = getContentSize(elem);
console.log(contentWidth, contentHeight);

方法2：通过box-sizing属性判断后直接取值 #

如果需要适配更特殊的业务场景，也可以先判断盒模型类型，再从计算样式中对应取值计算：

const getContentSize = (elem) => {
  const computedStyle = window.getComputedStyle(elem);
  const boxSizing = computedStyle.boxSizing;
  const width = parseFloat(computedStyle.width) || 0;
  const height = parseFloat(computedStyle.height) || 0;

  // content-box模式下，width/height本身就是内容区域尺寸
  if (boxSizing === 'content-box') {
    return { contentWidth: width, contentHeight: height };
  }

  // border-box模式下，需要减去内边距和边框宽度
  const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
  const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
  const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
  const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
  const borderLeft = parseFloat(computedStyle.borderLeftWidth) || 0;
  const borderRight = parseFloat(computedStyle.borderRightWidth) || 0;
  const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
  const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;

  return {
    contentWidth: width - paddingLeft - paddingRight - borderLeft - borderRight,
    contentHeight: height - paddingTop - paddingBottom - borderTop - borderBottom
  };
}

注意事项 #

• 以上两种方法都仅适用于元素可见的场景，如果元素设置了display: none，clientWidth和getComputedStyle返回的尺寸都会为0。如果需要测量隐藏元素的内容尺寸，可以临时将元素设置为visibility: hidden; position: absolute，挂载到文档中获取尺寸后再恢复原有样式即可。
• 如果元素存在横向/纵向滚动条，clientWidth已经自动扣除了滚动条的宽度，最终计算得到的内容尺寸就是实际可用于内容展示的区域大小，符合常规使用预期。

内容的提问来源于stack exchange，提问作者Don P