如何用JavaScript将display:block切换为none？含指定场景实现需求

这其实是DOM样式操作的基础操作，核心步骤就两步：先拿到目标元素，再修改它的style.display属性就行。给你两种最常用的实现方式：

• 通过ID获取元素（如果元素有唯一ID，这是最高效的方式）：

// 获取目标元素
const targetElement = document.getElementById('element');
// 将display从block改为none
targetElement.style.display = 'none';

• 通过选择器获取元素（适合更灵活的场景，比如用类名、标签名定位）：

// 用querySelector匹配元素，这里以ID选择器为例，也可以换成`.className`或`div`这类
const targetElement = document.querySelector('#element');
targetElement.style.display = 'none';

需要提一句：element.style只能直接读写行内样式，不过我们设置行内样式后，会覆盖CSS类中的对应属性（因为行内样式优先级更高），所以完全能满足需求。

针对你给出的代码：

#element { display: block; }

<div id="element"></div>

我们需要先添加一个触发按钮，再给按钮绑定点击事件，在事件逻辑里判断元素当前的显示状态并修改。这里给你两种更稳妥的实现思路：

思路一：处理初始样式为空的情况 #

因为元素的display:block是来自CSS类，初始时element.style.display会是空字符串，所以判断时要兼顾这种情况：

<!-- 先添加触发按钮 -->
<button id="toggleBtn">隐藏元素</button>
<div id="element"></div>

<script>
const toggleBtn = document.getElementById('toggleBtn');
const targetElement = document.getElementById('element');

toggleBtn.addEventListener('click', () => {
  // 初始状态下style.display为空，此时元素实际是block，所以要包含这个判断
  if (targetElement.style.display === 'block' || targetElement.style.display === '') {
    targetElement.style.display = 'none';
  }
});
</script>

思路二：获取浏览器实际渲染的样式 #

如果想更准确地判断元素当前的显示状态（不管样式来自行内、CSS类还是外部样式表），可以用getComputedStyle拿到浏览器最终生效的样式：

<button id="toggleBtn">隐藏元素</button>
<div id="element"></div>

<script>
const toggleBtn = document.getElementById('toggleBtn');
const targetElement = document.getElementById('element');

toggleBtn.addEventListener('click', () => {
  // 获取元素实际渲染时的样式
  const currentStyle = window.getComputedStyle(targetElement);
  if (currentStyle.display === 'block') {
    targetElement.style.display = 'none';
  }
});
</script>

这种方式兼容性好，也能避免因样式来源不同导致的判断误差，实际项目里用得更多。

内容的提问来源于stack exchange，提问作者Armin Eslami