本文讲解如何通过 JavaScript 正确修改 DOM 元素的 style.display 属性，重点解决因遗漏引号导致样式失效的常见错误，并提供可直接运行的示例代码。
本文讲解如何通过 javascript 正确修改 dom 元素的 `style.display` 属性，重点解决因遗漏引号导致样式失效的常见错误，并提供可直接运行的示例代码。
在 Web 开发中，使用 JavaScript 动态切换元素的显示与隐藏状态是一项基础但高频的操作。常见的做法是通过修改 element.style.display 属性实现，例如设为 'none' 隐藏、'initial'（或 'block'/'inline' 等）恢复显示。但一个极易被忽略的细节是：CSS 属性值必须以字符串形式赋值——若省略单引号或双引号，JavaScript 会将其识别为变量名，从而引发 ReferenceError 或静默失败。
你提供的代码中存在两个关键问题：
document.getElementById(a).style.display = initial; // ❌ 错误：initial 被当作未声明变量
document.getElementById('default').style.display = none; // ❌ 错误：none 同样未加引号正确写法应为：
<script>
function visible(a) {
document.getElementById(a).style.display = 'initial'; // ✅ 字符串字面量
document.getElementById('default').style.display = 'none'; // ✅
}
</script>⚠️ 注意事项：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
'initial'表示使用该属性的默认计算值（由浏览器根据元素类型决定），但并非所有场景都适用。例如<article></article>默认为display: block，若希望确保块级显示，更稳妥的写法是'block'； - 若目标元素初始为
display: none，而你想“恢复”其原始显示模式，建议提前用getComputedStyle()缓存原始值，或统一使用''（空字符串）——它会重置为 CSS 层叠后的默认值； -
onmouseover事件易触发频繁，如需更稳定交互，推荐改用现代事件监听方式（如addEventListener('mouseenter', ...)），并配合mouseleave实现回退逻辑。
✅ 完整可运行示例：
<article id="c1" style="display: none;">这是内容区域 c1</article>
<article id="default">这是默认显示的内容</article>
<img id="n1"
onmouseover="visible('c1')"
onmouseout="resetDefault()"
src="img/musicnote1.png"
alt="Music Note">
<script>
function visible(a) {
document.getElementById(a).style.display = 'block';
document.getElementById('default').style.display = 'none';
}
function resetDefault() {
document.getElementById('c1').style.display = 'none';
document.getElementById('default').style.display = 'block';
}
</script>总结：JavaScript 操作内联样式时，所有 CSS 值（包括 initial、none、flex、grid 等）都必须作为字符串传入；养成加引号的习惯，是避免低级错误、提升代码健壮性的第一步。
