CSS定义maxHeight后，object.style.maxHeight无法获取及生效问题

这个问题其实是DOM样式系统的一个常见特性，很多刚接触JS操作元素样式的开发者都会踩这个坑。我来给你拆解清楚：

核心原因 #

element.style这个对象只负责管理元素的内联样式（也就是直接写在HTML标签的style属性里的样式）。当你通过外部样式表、内嵌<style>标签定义max-height时，这个值会被存在元素的「计算样式」中，而不是element.style里——这就是为什么你直接读element.style.maxHeight会拿到空值，一开始设置它时也好像没生效（本质是CSS定义的样式暂时没被内联样式覆盖，而style对象本身还没关联上这个属性）。

解决方法 #

1. 获取CSS定义的maxHeight值
   如果需要读取通过CSS设置的max-height，得用window.getComputedStyle()来获取元素的计算样式：

   const myElement = document.getElementById('your-element-id');
   // 获取计算后的maxHeight值（带单位，比如"200px"）
   const actualMaxHeight = window.getComputedStyle(myElement).maxHeight;
   

2. 让element.style.maxHeight正常生效
   你只需要通过JS显式给style.maxHeight赋值一次，之后这个属性就会和元素的内联样式绑定，后续的读写操作都会直接作用于内联样式（优先级高于CSS定义的样式），自然就能正常工作了：

   const myElement = document.getElementById('your-element-id');
   // 第一次显式设置，哪怕是把计算样式的值再赋值回去
   myElement.style.maxHeight = window.getComputedStyle(myElement).maxHeight;
   // 之后再修改就直接生效了
   myElement.style.maxHeight = "400px";
   

简单来说，element.style就像元素的“专属内联样式记事本”，只有你先在上面写点东西，它才会开始帮你管理这个样式属性～

内容的提问来源于stack exchange，提问作者John Balvin Arias