
直接通过 setAttribute("height", value) 无法改变 div 的 CSS 高度,因为 height 不是 div 的标准 HTML 属性;应使用 element.style.height 设置内联样式。
直接通过 `setattribute("height", value)` 无法改变 div 的 css 高度,因为 height 不是 div 的标准 html 属性;应使用 `element.style.height` 设置内联样式。
在 Web 开发中,动态调整元素尺寸是常见需求,但容易混淆 HTML 属性(attributes)与 CSS 样式(CSS properties)。例如,<div> 标签本身没有 height 这个原生 HTML 属性(<img> 或 <input> 等标签才有 height/width 属性),因此调用 element.setAttribute("height", "300px") 实际只是给 DOM 元素添加了一个自定义属性,对渲染样式完全无效。
✅ 正确做法是操作元素的 style 对象,直接设置 CSS 属性:
const tabDiv = document.getElementById("div3");
const targetHeight = "200px"; // 注意:必须带单位(如 'px', 'rem', '%')
tabDiv.style.height = targetHeight;
tabDiv.style.maxHeight = targetHeight; // 如需同时限制最大高度⚠️ 注意事项:
- style.height 只影响内联样式(inline style),其优先级高于外部 CSS 类(如 .div_tab),但低于 !important 声明;
- 若需移除高度控制,可赋值为空字符串:tabDiv.style.height = "",此时将回退到 CSS 类或浏览器默认计算值;
- 动态计算值务必包含单位(如 "50%"、"1.5rem"、"calc(100vh - 80px)"),纯数字(如 200)会被忽略;
- 若需兼容旧版 IE 或处理 CSS 变量,建议统一使用 element.style.setProperty(),但对基础尺寸控制,style.xxx 更简洁可靠。
? 小技巧:若希望高度随内容自动适应(如取消固定高度),可将 height 设为 "auto",并确保 max-height 和 overflow-y 配合使用以维持滚动行为:
tabDiv.style.height = "auto"; tabDiv.style.maxHeight = "none"; // 或保留原 max-height 值
总之,修改视觉尺寸请始终操作 element.style,而非 setAttribute() —— 这是 DOM 操作中属性(attributes)与样式(properties)的根本分界。

















