如何获取HTML元素原始宽高，排除margin、padding、border等占用空间属性

使用window.getComputedStyle()接口即可实现需求，该接口可以读取元素最终生效的所有CSS属性值，不受样式定义位置（内联样式、内部样式表、外部样式表）的限制。

工具函数实现 #

function getElementRawInfo(targetEl) {
  const computedStyle = window.getComputedStyle(targetEl);
  // 转换数值工具方法
  const parseNumber = (cssProp) => parseInt(computedStyle[cssProp], 10);
  
  // 提取元素原始内容宽高
  const rawSize = {
    width: parseNumber('width'),
    height: parseNumber('height')
  };
  // 提取各方向间距值
  const margin = {
    top: parseNumber('marginTop'),
    right: parseNumber('marginRight'),
    bottom: parseNumber('marginBottom'),
    left: parseNumber('marginLeft')
  };
  const padding = {
    top: parseNumber('paddingTop'),
    right: parseNumber('paddingRight'),
    bottom: parseNumber('paddingBottom'),
    left: parseNumber('paddingLeft')
  };
  const border = {
    top: parseNumber('borderTopWidth'),
    right: parseNumber('borderRightWidth'),
    bottom: parseNumber('borderBottomWidth'),
    left: parseNumber('borderLeftWidth')
  };
  
  return {
    element: rawSize,
    spacing: {
      margin,
      padding,
      border,
      // 单方向总占位间距（margin+border+padding）
      total: {
        top: margin.top + border.top + padding.top,
        right: margin.right + border.right + padding.right,
        bottom: margin.bottom + border.bottom + padding.bottom,
        left: margin.left + border.left + padding.left
      }
    }
  };
}

调用示例 #

针对你给出的测试页面，调用方法如下：

const fooEl = document.querySelector('#foo');
const result = getElementRawInfo(fooEl);
console.log(result);

输出结果完全符合预期：

{
  "element": {
    "width": 120,
    "height": 48
  },
  "spacing": {
    "margin": { "top": 64, "right": 64, "bottom": 64, "left": 64 },
    "padding": { "top": 23, "right": 23, "bottom": 23, "left": 23 },
    "border": { "top": 7, "right": 7, "bottom": 7, "left": 7 },
    "total": { "top": 94, "right": 94, "bottom": 94, "left": 94 }
  }
}

注意事项 #

如果元素设置了box-sizing: border-box，computedStyle.width返回值会包含padding和border的宽度，此时你可以手动减去对应方向的padding和border值得到原始内容宽高，也可以临时将元素的box-sizing属性改为content-box读取数值后再还原。

内容的提问来源于stack exchange，提问作者Maurice Meyer