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（注册按钮）注意：CSS中div2的显示为“ none”；而login（）和registerUser（）函数是针对本地存储的，而不是此问题。谢谢。

Answer 1

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

这是一个简单的例子

from package1.module1 import ClassOne

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

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

.hide {
  display: none;
}

Answer 2

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

在应用活动样式表并解决了这些值可能包含的所有基本计算之后，window.getComputedStyle()方法将返回一个包含元素的所有CSS属性值的对象。可以通过对象提供的API或使用CSS属性名称建立索引来访问各个CSS属性值。

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

了解更多信息

单击按钮时显示和隐藏div

2 个答案: