纯JavaScript实现display属性切换故障求助

问题描述 #

想用纯JavaScript实现按钮切换元素的display属性，在none和block之间切换，但当前代码只能隐藏元素，无法恢复显示。同时想确认隐藏后的元素是否存在选中问题，且不想使用jQuery。

原代码 #

JavaScript代码

let m = 1;

function show() {
  document.getElementById('cardContainer').style.backgroundColor = "block"
  m = 1;
}

function hide() {
  document.getElementById('cardContainer').style.display = 'none'
  m = 0;
}

function toggle() {
  if (m === 0) {
    show();
  } else {
    hide();
  }
}

CSS代码

#cardContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 15px;
  background-color: #000000;
}

#cardM1,
#cardM2,
#cardM3 {
  background-color: #ffffff;
  display: inline-block;
  padding: 25px;
  margin: 10px;
}

HTML代码

<button onclick="toggle();">Click</button>

<div id="cardContainer">
  <div id="cardM1">
    <!--Stuff added later here-->
  </div>

  <div id="cardM2">
    <!--Stuff added later here-->
  </div>

  <div id="cardM3">
    <!--Stuff added later here-->
  </div>
</div>

问题分析与解决 #

1. 核心错误：show()函数里写错了属性——你把要修改的display写成了backgroundColor，这就导致执行show()时根本没恢复元素的显示状态，自然无法显示。

2. 修正后的基础代码：

let m = 1;

function show() {
  // 修正为修改display属性
  document.getElementById('cardContainer').style.display = "block"
  m = 1;
}

function hide() {
  document.getElementById('cardContainer').style.display = 'none'
  m = 0;
}

function toggle() {
  if (m === 0) {
    show();
  } else {
    hide();
  }
}

3. 更优实现（无需全局变量）：
   可以直接通过元素当前的display状态判断，避免依赖全局变量，逻辑更可靠：

function toggle() {
  const container = document.getElementById('cardContainer');
  if (container.style.display === 'none') {
    container.style.display = 'block';
  } else {
    container.style.display = 'none';
  }
}

这样连show()和hide()函数都可以省略，代码更简洁。

关于隐藏元素的选中问题 #

当元素display: none时，它会从页面渲染树中移除，无法被选中或交互（比如点击、选中文字、获取焦点等操作都无效），因为浏览器不会渲染这个元素，它相当于“不存在”在页面视觉区域和交互区域里。

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