为何onClick绑定函数无法为div添加类？技术求助

问题描述 #

点击LOGIN按钮后，console.log()能正常输出，但#overlay和#popUpForm两个Div的类样式未生效，无法显示弹窗效果。

原代码片段 #

JavaScript代码

<script>
  function showLoginForm(){
    document.getElementById('overlay').classList.add("showOverlay");
    document.getElementById('popUpForm').classList.add("showpopUpForm");
    console.log("Hello, world!");
  }
  var loginBtn = document.getElementById('loginBtn');
  loginBtn.addEventListener("click",showLoginForm);
</script>

HTML按钮代码

<li><button id="loginBtn" >LOGIN</button></li>

弹窗Div代码

<div id="overlay"></div>
<div id="popUpForm">
  <div id="headTexts">
    <h1>Welcome back !</h1>
    <h3>Please enter your login details</h3>
  </div>
  <div id="btns">
    <button id="popLoginBtn">Login</button>
  </div>
  <div id="loginForm">
    <input type="text" name="" id="nameText" placeholder="phone" class="popInput">
    <input type="password" name="" id="paswText" placeholder="Password" class="popInput">
    <input type="submit" value="Login" id="userLoginBtn">
  </div>
  <div id="signupBox">
    <p>Please enter your login details</p>
    <button id="popSignupBtn">Signup</button>
  </div>
</div>

CSS代码

#overlay {
  height: 100vh;
  width: 100vw;
  background-color: rgb(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  transition: 0.5s;
  opacity: 0;
}

.showOverlay {
  z-index: 1000;
  opacity: 1;
  background-color: red;
}

#popUpForm {
  position: fixed;
  height: auto;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding: 2vw;
  opacity: 0;
  top: -50%;
  transition: 2s;
}

.showpopUpForm {
  top: 50%;
  opacity: 1;
  z-index: 1100;
}

/* 其余CSS代码省略 */

问题根源 #

CSS选择器优先级冲突：ID选择器（如#overlay、#popUpForm）的优先级远高于类选择器（如.showOverlay、.showpopUpForm）。即使成功为Div添加了类，类中的样式也会被ID定义的样式覆盖，导致视觉上没有变化。

解决方案 #

修改CSS，提高类选择器的优先级，使用ID+类的组合选择器，让类样式能够覆盖ID的初始样式：

#overlay.showOverlay {
  z-index: 1000;
  opacity: 1;
  background-color: red;
}

#popUpForm.showpopUpForm {
  top: 50%;
  opacity: 1;
  z-index: 1100;
}

修改后，点击LOGIN按钮，类样式会正常生效，弹窗和遮罩层就能正确显示。

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