JS新手求助：使用setProperty切换div的display属性无效果

你的代码功能失效的核心原因是CSS选择器范围错误：你写的div { display: none; }会选中页面中所有div元素，包括外层的main容器。当main被设置为display: none时，它内部的所有子div都会被隐藏，无论你如何设置子div的display属性都无法显示。

修正方案 #

1. 调整CSS选择器 #

将全局的div选择器改为仅针对需要切换的子div，通过父容器#main限定范围：

#main > div {
  background: red;
  padding: 10px;
  color: white;
  margin: 10px;
  display: none
}

html {
  background: grey;
}

2. 可选优化（提升代码健壮性） #

• getElementById的参数要求是字符串类型，建议调用show时传入字符串，或在函数内将数字转为字符串，避免潜在类型问题：
  修改按钮的onclick属性：

  <button onclick="show('1')">show 1</button>
  <button onclick="show('2')">show 2</button>
  <button onclick="show('3')">show 3</button>
  

• 简化show函数逻辑，去掉冗余变量：

  function init() {
    show('1')
  }
  
  function show(n) {
    document.getElementById(n).style.setProperty('display', 'block');
  
    for (let i = 1; i < 4; i++) {
      const id = String(i);
      if (id !== n) {
        document.getElementById(id).style.setProperty('display', 'none');
      }
    }
  }
  

修正后的完整代码 #

<body onload="init()">
  <div id="main">
    <div id="1">div1</div>
    <div id="2">div2</div>
    <div id="3">div3</div>
    <div id="4">div4</div>
  </div>

  <button onclick="show('1')">show 1</button>
  <button onclick="show('2')">show 2</button>
  <button onclick="show('3')">show 3</button>
</body>

<style>
#main > div {
  background: red;
  padding: 10px;
  color: white;
  margin: 10px;
  display: none
}

html {
  background: grey;
}
</style>

<script>
function init() {
  show('1')
}

function show(n) {
  document.getElementById(n).style.setProperty('display', 'block');

  for (let i = 1; i < 4; i++) {
    const id = String(i);
    if (id !== n) {
      document.getElementById(id).style.setProperty('display', 'none');
    }
  }
}
</script>

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