本文详解为何 `style.display` 判断失效，并提供可靠方案：通过 css 预设 `display: none`，再用 javascript 安全切换显示状态，确保内容初始隐藏、点击后正确展开/收起。
在 JavaScript 中直接读取 element.style.display 只能获取内联样式（inline style）中显式设置的值，而无法读取来自 CSS 规则（如 <style> 或外部样式表）的 display 值。这意味着：即使你通过 CSS 设置了 #more { display: none; }，x.style.display 仍返回空字符串 ""，而非 "none" —— 因此原始代码中的 if (x.style.display == "none") 永远为 false，导致元素始终显示。
✅ 正确做法是：用 CSS 初始化隐藏状态，再用 JavaScript 控制切换。以下是完整、健壮的实现：
<style>
#more {
display: none; /* 关键：CSS 层面强制初始隐藏 */
}
</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');
// 使用 !== "block" 更安全：兼容初始为空字符串或其它值（如 "flex"）
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>? 进阶建议（提升鲁棒性）：
- ✅ 推荐使用 getComputedStyle() 获取真实渲染样式（含 CSS 规则），但对本场景非必需；
- ✅ 更现代写法可改用 classList.toggle() 配合 CSS 类控制显隐，语义更清晰、扩展性更强：
<style>
#more { display: none; }
#more.show { display: block; }
</style>
<script>
function myFunction() {
document.getElementById('more').classList.toggle('show');
}
</script>⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 不要依赖 x.style.display === "" 做判断，它不可靠；
- 避免混合使用 display: block 与 display: flex 等不同值时逻辑错乱，建议统一显示模式或改用 classList；
- 若项目已引入 jQuery，可用 $('#more').toggle() 一行解决，但原生方案更轻量、无依赖。
总结：初始隐藏必须由 CSS 保证，JavaScript 仅负责状态切换——这是解决此类问题的根本原则。
