单击按钮时显示和隐藏 div

Question

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");
let btn2 = document.getElementById("btn-signup");
let div2 = document.getElementById("signMe");

btn.addEventListener("click", () => {
    if (div.style.display === "none") {
        div2.style.display = "block";
    } else {
        div.style.display = 'none';
    }
})

 <div id="loglog">
                <form id="wrap">
                <img class="userImage" src="user.png" alt="user">
                <input id="email" type="text" name="email" placeholder="E-mail">
                <input id="password" type="password" name="password" placeholder="Password">
                <button id="btn-login" type="button" onclick="login()">Login</button>
                <div id="warning-msg"></p>
                </form>
            </div>

            <div id="signMe">
                <form id="Create">
                <h2>Create Account</h2>
                <input id="firstName" type="text" placeholder="First Name">
                <input id="lastName" type="text" placeholder="Last Name">
                <input id="newEmail" type="text" placeholder="E-mail">
                <input id="newPassword" type="password" placeholder="Password">
                <button id="btn-signup" type="button" onclick="registerUser()">Sign Up</button>
                <div id="warning-msg">
                </form>
            </div>

嗨专家们，我想知道当我点击 div1（登录按钮）时如何显示 div2（注册按钮）注意：div2在css中的显示是“none”；而 login() & registerUser() 函数是针对 localstorage 的，不是这个问题。谢谢。

Answer 1

您应该使用 window.getComputedStyle() 来正确访问元素的样式。

The window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");
let btn2 = document.getElementById("btn-signup");
let div2 = document.getElementById("signMe");

btn.addEventListener("click", () => {
console.log(div.style.display)
    if (window.getComputedStyle(div) === "none") {
        div2.style.display = "block";
    } else {
        div.style.display = 'none';
    }
});

您可以从 MDN

阅读更多相关信息

Answer 2

JS 切换功能非常适合切换类开和关。

这是一个简单的例子

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");

btn.addEventListener("click", () => {
    div.classList.toggle('hide');
})

.hide {
  display: none;
}

<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>

单击按钮时显示和隐藏 div

Show and hide divs when click button

html

javascript

css

show-hide