本文详解如何通过 CSS 初始化隐藏元素、配合 JavaScript 动态控制 style.display 实现“展开/收起”功能，解决因内联样式未初始化导致的初始显示异常问题。
本文详解如何通过 css 初始化隐藏元素、配合 javascript 动态控制 `style.display` 实现“展开/收起”功能，解决因内联样式未初始化导致的初始显示异常问题。
在 Web 开发中，实现“点击显示更多内容”的交互非常常见，但初学者常遇到一个典型问题：元素始终可见，无法默认隐藏。根本原因在于：element.style.display 仅读取内联样式（inline style），而 HTML 元素默认由浏览器渲染引擎赋予 display: block（如 <div>），若未显式设置内联 display 值，x.style.display 将返回空字符串 ""，而非 "block" 或 "none"。因此，直接用 if (x.style.display === "none") 判断必然失效。
✅ 正确做法是：通过外部 CSS 或 <style> 标签预先设置初始状态，再用 JavaScript 切换内联 display 值。推荐使用 CSS 初始化：
<style>
#more {
display: none; /* 关键：确保页面加载时即隐藏 */
}
</style>
<button onclick="myFunction()">More</button>
<div class="black" id="more">
<p>I was supercool guys.... bla bla bla bla</p>
</div>
<script>
function myFunction() {
const x = document.getElementById('more');
// 检查当前内联 display 值是否为 "block"（即已展开）
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>? 进阶优化建议：
- 使用 getComputedStyle() 更健壮地获取真实渲染样式（兼容 CSS 类、继承等）：
const computed = getComputedStyle(x); if (computed.display === "none") { /* ... */ } - 推荐改用 classList.toggle() 配合 CSS 类，语义更清晰、维护性更强：
<style>.hidden { display: none; }</style> <!-- JS --> x.classList.toggle('hidden'); - 避免内联 onclick，改用事件监听器提升可维护性：
document.querySelector('button').addEventListener('click', myFunction);
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 不要依赖 x.style.display 判断默认状态，它不反映 CSS 规则；
- 确保 CSS 选择器优先级足够（如 #more ID 选择器通常足够）；
- 若元素有其他 CSS 框架样式（如 Bootstrap 的 d-none），需注意覆盖逻辑；
- PHP 在此场景中仅作服务端渲染，不影响前端 DOM 行为，无需特殊处理。
掌握这一模式，即可稳定实现各类折叠/展开交互，是前端基础交互能力的重要一环。
