如何使用JavaScript显示div元素？附功能实现代码解析

嘿，我来帮你理清楚怎么用JavaScript控制div的显示，结合你给出的代码来拆解说明～

首先，核心逻辑其实很简单：要显示或隐藏div，关键是操作元素的style.display属性——把它设为"block"（块级显示）就能让div显示出来，设为"none"就会把它隐藏。

先来看你提供的这段实现代码：

function Myfunction1() { 
  var a = document.getElementById("signup"); 
  var b = document.getElementById("loginpage1"); 
  if (a.style.display === "none") { 
    a.style.display = "block"; 
    b.style.display = "none"; 
  } else { 
    b.style.display = "none"; 
  } 
}

代码逻辑拆解 #

• 第一步用document.getElementById()拿到了两个目标div元素：signup和loginpage1
• 接着判断如果signup当前是隐藏状态（display: none），就把它显示出来，同时隐藏loginpage1
• 不过这里的else分支有个小问题：else里只隐藏了loginpage1，却没处理signup的状态。如果signup本来是显示的，执行else分支后它还是会保持显示，这可能不是你想要的效果哦？

优化后的实现方案 #

如果你想实现的是在两个div之间切换显示（比如点一次显示注册页，再点一次显示登录页），可以把代码改成这样：

function toggleAuthDivs() { 
  const signupDiv = document.getElementById("signup"); 
  const loginDiv = document.getElementById("loginpage1"); 
  
  // 切换signup的显示状态，同时反向控制login页
  if (signupDiv.style.display === "none") {
    signupDiv.style.display = "block";
    loginDiv.style.display = "none";
  } else {
    signupDiv.style.display = "none";
    loginDiv.style.display = "block";
  }
}

进阶小技巧：用CSS类控制显示隐藏 #

如果你的样式是写在CSS里而不是内联样式，直接用style.display可能获取不到初始状态（因为element.style只能读取内联样式）。这时候推荐用添加/移除CSS类的方式，更灵活也更符合语义化：

先定义一个隐藏类：

.hidden {
  display: none;
}

然后JS代码改成：

function toggleAuthDivs() {
  const signupDiv = document.getElementById("signup");
  const loginDiv = document.getElementById("loginpage1");
  
  // 切换两个div的hidden类
  signupDiv.classList.toggle("hidden");
  loginDiv.classList.toggle("hidden");
}

这种方式的好处是，以后如果要修改隐藏的样式（比如改成visibility: hidden），只需要改CSS就行，不用动JS代码～

内容的提问来源于stack exchange，提问作者shoaib.ahmed92