如何用 JavaScript 正确实现段落元素的显示/隐藏切换功能

本文详解如何通过 `classlist.toggle()` 配合 css 类控制 `

` 元素的显隐状态，解决因误用自定义标签、未更新 dom 样式或逻辑未生效导致的“只能隐藏不能显示”问题。

在前端开发中，实现点击按钮切换段落（

）的显示与隐藏是一个基础但易出错的功能。你遇到的问题——“点击后段落消失，再点却不再出现”——根本原因在于：JavaScript 修改了变量 displaySettings 的值，但并未将其写回元素的 style.display 属性。原代码中：

var displaySettings = x.style.display; // 仅读取当前值
// ... 判断并赋新值给 displaySettings 变量
// ❌ 缺少关键一步：x.style.display = displaySettings;

这导致无论判断逻辑多么正确，DOM 元素的实际样式始终未更新。

此外，HTML 中使用了非法标签 和 。HTML 标准不支持此类自定义标签（除非注册为 Custom Elements），浏览器会将其视为未知元素，可能引发解析异常或样式失效。应统一使用语义化标准标签，如

，并通过 id 或 class 区分。

✅ 推荐采用 CSS 类驱动 + JavaScript 事件监听 的现代实践方式，既清晰解耦，又避免内联样式的维护陷阱。

✅ 正确实现步骤

1. 修正 HTML 结构（使用标准标签）

Junior Developer
"this is my text"
About me

⚠️ 注意：移除 /； 标签闭合正确；id="toggle" 为 JS 绑定提供唯一锚点。

2. 编写简洁可靠的 JavaScript

document.querySelector("#toggle").addEventListener("click", myFunction);

function myFunction() {
  const element = document.getElementById("abMe");
  element.classList.toggle("show");
}

• 使用 addEventListener 替代内联 onclick，提升可维护性与可测试性；
• classList.toggle("show") 自动添加或移除 show 类，无需手动判断 display 值。

3. 定义 CSS 规则（利用层叠逻辑）

#abMe {
  position: relative;
}

/* 默认隐藏 */
#abMe:not(.show) {
  display: none;
}

/* 显式显示时覆盖隐藏规则 */
#abMe.show {
  display: block; /* 或 inline-block，按需调整 */
}

• :not(.show) 确保未携带 show 类时强制隐藏；
• .show 类仅需声明 display，无需重复其他样式，符合单一职责原则。

? 补充说明与最佳实践

• 避免操作 style.display：直接修改 element.style.display 会覆盖外部 CSS，且难以追踪状态；类控制更可控、可复用。
• 检查控制台报错：浏览器开发者工具（F12 → Console）可快速定位 getElementById 返回 null（ID 拼写错误/脚本执行过早）等常见问题。
• 脚本加载时机：确保 JS 在 DOM 加载完成后执行。若脚本置于 ，请添加 defer 属性或包裹在 DOMContentLoaded 事件中。

通过以上结构化方案，即可稳定、可扩展地实现点击切换显隐效果，同时为后续添加动画（如 transition: opacity .3s）、响应式适配等留出良好基础。