如何动态修改 HTML 元素的 CSS 高度属性

直接使用 setAttribute("height", value) 无法改变 <div> 的实际显示高度，因为 height 不是有效的 HTML 属性；应通过 DOM 元素的 style 对象设置 CSS height 和 maxHeight 等样式属性。

直接使用 `setattribute("height", value)` 无法改变 `

` 的实际显示高度，因为 `height` 不是有效的 html 属性；应通过 dom 元素的 `style` 对象设置 css `height` 和 `maxheight` 等样式属性。

在 Web 开发中，一个常见误区是混淆 HTML 属性（attributes） 与 CSS 样式属性（CSS properties）。例如，<div height="500"> 并非标准 HTML 写法（height 属性仅对 <img>、<iframe> 等少数元素有效），因此调用 element.setAttribute("height", "300px") 实际上只是向元素添加了一个无意义的自定义属性，浏览器完全忽略它，自然不会影响渲染高度。

正确做法是操作元素的 style 属性，它对应内联 CSS 样式，具有最高优先级（可覆盖外部样式表中的 .div_tab { height: 500px; }）：

const tabDiv = document.getElementById("div3");const targetHeight = "200px"; // 注意：必须包含单位（如 'px', 'rem', '%'）// 设置 CSS height 和 maxHeight（按需）tabDiv.style.height = targetHeight;tabDiv.style.maxHeight = targetHeight;

注意事项：

1. 单位不可省略：tabDiv.style.height = 200 ❌（无效）；必须写为 "200px" ✅；
2. 若原样式通过 class 定义（如 .div_tab { height: 500px; }），style.height 会覆盖它；如需恢复 class 控制，可设为空字符串：tabDiv.style.height = ""；
3. max-height 与 height 行为不同：前者是上限约束，后者是精确高度；二者可独立设置；
4. 如需支持动画过渡，建议在 CSS 中预先定义：

   .div_tab {  transition: height 0.3s ease, max-height 0.3s ease;}

? 扩展技巧：若需根据内容自动适配高度（如展开/收起），可结合 scrollHeight 动态计算：

tabDiv.style.height = "auto"; // 先释放高度限制const autoHeight = tabDiv.scrollHeight + "px";tabDiv.style.height = autoHeight;

总之，修改视觉尺寸请始终操作 element.style.xxx，而非 setAttribute() —— 这是 DOM 样式控制的基本原则。