本文讲解如何通过 JavaScript 正确设置元素的 display 样式属性，重点纠正字符串字面量缺失导致的常见错误，并提供可直接运行的完整示例。
本文讲解如何通过 javascript 正确设置元素的 `display` 样式属性，重点纠正字符串字面量缺失导致的常见错误，并提供可直接运行的完整示例。
在 Web 开发中，常需通过 JavaScript 动态控制元素的显示与隐藏，其中最常用的方式是操作 element.style.display 属性。但一个极易被忽略的细节是：CSS 属性值（如 'initial'、'none'、'block'）必须以字符串形式赋值——若省略引号，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>此外，为确保功能健壮，建议添加基础容错处理：
立即学习“Java免费学习笔记（深入）”；
<script>
function visible(a) {
const target = document.getElementById(a);
const defaultEl = document.getElementById('default');
if (target) target.style.display = 'initial';
if (defaultEl) defaultEl.style.display = 'none';
}
</script>⚠️ 注意事项：
-
onmouseover仅触发一次悬停进入，若需悬停离开时恢复原状，应配合onmouseout使用； -
'initial'表示使用该属性的默认计算值（对display而言，通常等价于浏览器默认行为，但可能因元素类型而异；更稳妥的做法是记录原始值或显式设为'block'/'inline'等）； - 推荐优先使用 CSS 类切换（如
element.classList.add('show')）替代内联样式操作，便于维护与复用。
完整可运行示例（含 HTML 结构）：
<article id="c1" style="display: none;">这是 c1 内容</article>
<article id="default">这是默认内容</article>
<img id="n1" onmouseover="visible('c1')"
src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%234CAF50'/></svg>"
alt="Music Note">
<script>
function visible(a) {
const target = document.getElementById(a);
const defaultEl = document.getElementById('default');
if (target) target.style.display = 'block';
if (defaultEl) defaultEl.style.display = 'none';
}
</script>掌握这一基础要点，即可安全、可靠地通过 JavaScript 控制元素可见性，为交互式界面开发打下坚实基础。
