本文讲解如何通过 JavaScript 正确修改 DOM 元素的 display 样式属性，重点解决因遗漏引号导致字符串值未被识别而引发的样式失效问题。
本文讲解如何通过 javascript 正确修改 dom 元素的 `display` 样式属性，重点解决因遗漏引号导致字符串值未被识别而引发的样式失效问题。
在 Web 开发中，常需通过用户交互（如鼠标悬停）动态显示或隐藏页面元素。一个典型场景是：当用户将鼠标移至某张图片上时，让指定 <article></article> 元素显示，同时隐藏默认内容。但若 JavaScript 中对 style.display 的赋值未使用字符串字面量，浏览器会将其误认为变量名，从而报错（如 ReferenceError: initial is not defined），导致样式完全不生效。
你原始代码的问题在于：
document.getElementById(a).style.display = initial; // ❌ 错误：initial 是未声明的变量
document.getElementById('default').style.display = none; // ❌ 错误：none 同样被当作变量initial 和 none 是 CSS 关键字，但在 JavaScript 中必须以字符串形式传入，即加上单引号或双引号：
✅ 正确写法如下：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
<img id="n1" onmouseover="visible('c1')" src="img/musicnote1.png" alt="Music Note">
<!-- 假设存在：<article id="c1">...</article> 和 <article id="default">...</article> --><script>
function visible(a) {
document.getElementById(a).style.display = 'initial'; // ✅ 字符串 'initial'
document.getElementById('default').style.display = 'none'; // ✅ 字符串 'none'
}
</script>⚠️ 注意事项：
-
'initial'表示恢复该元素在 CSS 中定义的默认display值（如<div> 默认为 <code>'block'，<span></span>默认为'inline'）。若希望确保“可见”，更稳妥的方式是显式设置为'block'、'inline-block'等具体值，尤其当元素原本无 CSS 定义时； - 若目标元素初始为
display: none，仅靠display = 'initial'可能无法按预期显示——建议统一用display = 'block'（或匹配其语义的显示类型）并配合 CSS 预设； - 推荐避免内联事件（如
onmouseover），改用addEventListener实现关注点分离，提升可维护性：
<script>
document.getElementById('n1').addEventListener('mouseover', () => {
document.getElementById('c1').style.display = 'block';
document.getElementById('default').style.display = 'none';
});
</script>总结：JavaScript 操作 CSS 样式时，所有 CSS 值（包括 none、block、flex、initial、inherit 等）都必须作为字符串传入 style.xxx 属性；遗漏引号是最常见且隐蔽的错误之一，务必养成加引号的习惯。
