如何使用 JavaScript 动态控制元素的 CSS display 样式-html教程-PHP中文网

如何使用 JavaScript 动态控制元素的 CSS display 样式

本文讲解如何通过 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 终端节点、同步与异步等。

下载

'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>

@@##@@

<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 等）都必须作为字符串传入；养成加引号的习惯，是避免低级错误、提升代码健壮性的第一步。