使用原生JS获取DOM元素width/height属性返回undefined的原因及方法

你遇到的undefined返回值，是两个认知误区叠加导致的，和浏览器兼容性没关系：

• 你参考的文档页面中标注的可直接通过.width、.height访问的属性，是<object>、<embed>这类特殊嵌入元素专属的内置DOM属性，并不是所有通用DOM元素（div、SVG这类）都自带的通用属性。
• 只有W3C标准明确规定需要同步到DOM对象顶级属性的内容，才能通过element.属性名的方式直接读取。比如id是所有HTMLElement标准定义的内置属性，你才能直接通过element.id拿到值；但你在div标签上手动写的width="55"，根本不是div元素的合法原生属性——HTML标准中div本身不存在width这个原生属性，它只是你写入的一个自定义值，浏览器不会把这个值同步成DOM对象的顶级属性，自然你直接点.width就只会返回undefined。

你明确不需要jQuery、outerWidth这类第三方方法，也不需要动态计算的布局尺寸值，只需要直接从元素本身读取写在标签上的width/height值，完全可以使用所有DOM元素原生自带的getAttribute()方法获取，没有任何额外依赖，这就是元素本身的内置方法：

// 读取标签上写入的原始width属性值
const widthVal = document.querySelector('.container').getAttribute('width')
// 读取标签上写入的原始height属性值
const heightVal = document.querySelector('.container').getAttribute('height')

这种方式不管是你在div上写的非原生自定义width/height，还是SVG元素上的原生合法width/height属性，都能直接拿到你写在标签上的原始字符串值，不需要额外计算。

SVG元素本身确实在标准中定义了可直接通过.width、.height访问的属性，但这类属性返回的不是直接的数值，而是SVGAnimatedLength类型的动画长度对象——要拿到实际数值还需要额外访问.baseVal.value层级，反而不如直接用getAttribute读取原始值直接。 #

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