为何Div DOM对象无width与height属性？新手开发者求助

嘿，我完全懂你作为编程新手遇到这种问题的困惑——明明在CSS里给div设了100px的宽高，结果直接访问DOM对象的width和height属性却得到undefined，确实挺挠头的！

核心原因：DOM元素对象没有直接的width/height属性 #

你直接写的test.width这种写法，是在找DOM元素对象本身的固有属性，但实际上标准DOM元素并没有内置这两个属性。你在CSS里设置的宽高属于元素的样式信息，并不是DOM对象的直接属性，所以直接访问自然会得到undefined。

正确获取CSS设置的宽高的方法 #

如果想拿到你在CSS里定义的（或者浏览器最终计算后的）宽高，可以用getComputedStyle方法，它会返回元素最终应用的所有样式：

window.onload = function() {
  var test = document.getElementById("test");
  test.addEventListener("click", select);
  function select(e) {
    const computedStyle = window.getComputedStyle(e.target);
    const width = computedStyle.width; // 会返回类似"100px"的字符串
    const height = computedStyle.height;
    console.log(width, height);
    // 如果需要纯数值，可以转成数字：parseInt(width)
  }
};

关于offsetWidth和CSS width的区别 #

你提到的offsetWidth确实和CSS里的width不是一回事，它们的差异主要在这几点：

• offsetWidth是元素在页面中实际占据的水平宽度，包含：内容区宽度 + 左右内边距（padding） + 左右边框（border） + 垂直滚动条宽度（如果存在的话）
• CSS的width（当box-sizing: content-box时，这是默认值）只是内容区的宽度，不包含padding、边框和滚动条
• 如果设置了box-sizing: border-box，CSS的width会包含内容区、padding和边框，这时候和offsetWidth的差异就只剩滚动条了

总结一下 #

• 别直接访问DOM元素的width/height属性，它们本身就不存在
• 要获取CSS计算后的宽高，用getComputedStyle方法
• offsetWidth是元素的实际占位宽度，适合需要知道元素在页面中占多大空间的场景

内容的提问来源于stack exchange，提问作者Black Beard