如何用JavaScript获取CSS中其他单位定义的max-width像素值？

要拿到元素最终渲染时的max-width像素值，不管CSS里用的是百分比、em还是其他单位，直接用window.getComputedStyle()就能搞定——它会返回元素实际渲染后的计算样式，自动把非像素单位转换成像素。

完整示例代码 #

HTML

<div>Lorem, ipsum.</div>

CSS

div {
  max-width: 50%;
}

JavaScript

const ele = document.querySelector("div");
// 获取计算后的max-width，结果为带px单位的字符串
const eleMaxWidth = window.getComputedStyle(ele).maxWidth;
console.log(eleMaxWidth); // 输出类似 "400px" 这样的像素值

// 如果需要纯数值（不带px后缀），用parseFloat提取
const maxWidthNum = parseFloat(eleMaxWidth);
console.log(maxWidthNum); // 输出类似 400 的数值

补充说明 #

• window.getComputedStyle()读取的是元素最终渲染状态下的样式，只要元素处于文档流中能正常计算尺寸，不管CSS原始单位是什么，尺寸类属性都会转换成对应的像素值。
• 如果元素处于隐藏状态（比如display: none），可能无法获取准确的计算值，需要确保元素处于可渲染状态后再调用该方法。

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