单击按钮时显示和隐藏 div答案

【问题标题】：Show and hide divs when click button单击按钮时显示和隐藏 div
【发布时间】：2020-10-25 08:19:48
【问题描述】：

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() 函数用于本地存储而不是这个问题。谢谢。

【问题讨论】：

标签： javascript html css show-hide

【解决方案1】：

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>

【讨论】：

感谢海沃氏！它正在工作！上帝保佑，直到下一次！

【解决方案2】：

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

window.getComputedStyle() 方法在应用活动样式表并解决这些值可能包含的任何基本计算之后，返回一个包含元素所有 CSS 属性值的对象。单个 CSS 属性值可通过对象提供的 API 访问，或者通过使用 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了解更多信息

【讨论】：