Question

我正在开发一个单页网站，因为在Firebase上托管它比较便宜。我的问题是我必须在一个HTML文件中管理不同的屏幕。因此，我必须使屏幕消失并再次出现。我想用main_dashboard_page.style.display = 'none';和main_dashboard_page.style.display = 'block';来做到这一点。
这是我的HTML代码：

<!-- _______________________________________________________________________________________________________________________________________ -->
    <!--                                                         L O G I N  P A G E                                                              -->
    <!-- _______________________________________________________________________________________________________________________________________ -->

    <div class="login_page" id="login_page">

    <div class="card_view">
      <div class="login_container" id="login_container">
        <div class="wrap_login">
          <div class="login_form validate-form">

            <span class="login_form_title p-b-26">
                        Login
                    </span>

            <div>
              <label for="email_field">E-Mail</label>
              <input type="text" id="email_field" name="email_field" placeholder="E-Mail">

              <label for="password_field">Passwort</label>
              <input type="password" id="password_field" name="password_field" placeholder="Passwort">

              <input type="submit" value="Einloggen" onclick="login()">
            </div>

                    <div class="center_text_container p-t-115">
                        <span class="txt1">
                            Du hast noch keinen Account?
                        </span>

                        <a class="txt2" onclick="goToSignUp()">
                            Registrieren
                        </a>
          </div>

       <div class="modal">
            <div class="modal-content">
              <h1 id="msg_title"><h1>
              <p id="msg_content"></p>
              <div id="lds-ellipsis" class="lds-ellipsis" style="display: none;"><div></div><div></div><div></div><div></div></div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <!-- _______________________________________________________________________________________________________________________________________ -->
  <!--                                                         M A I N  P A G E                                                                -->
  <!-- _______________________________________________________________________________________________________________________________________ -->

  <div class="html_side_main" id="html_side_main">

    <div class="toolbar">
      <div class="centered_toolbar">
        <img src="../images/logo.png" width="200px" height="auto" style="position: absolute; left: 0px; margin-left: 30px;"></img>
        <ul>
          <li class="active"><a href='../main/main_index.html'><i class="dashboard"></i>Dashboard</a></li>
          <li><a href='../notenliste/notenliste.html'><i class="notenliste"></i>Notenliste</a></li>
        </ul>
        <a href='#' onclick="logout()" style="position: absolute; right: 0px; margin-right: 20px;"><i class="logout"></i>Logout</a>
    </div>

    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>

  </div>

    <div class='main'>
      <div class='main_padding'>
        <div class='noten_stats'>
          <p class="noten_stats_title">alpha_version: 1.0</p>
          <div class="punkte_container">
            <span class="punkte"></span>
            <span class="punkte_text">Willkommen zur alpha version von kaffboard! Der Support ist rund um die Uhr erreichbar: raycroud@gmail.com</span>
          </div>
        </div>
      </div>
    </div>
  </div>

如您所见，我有两个屏幕，分别表示为div：
1）ID：login_page
2）ID：html_side_main
现在，当用户登录时，login_page应该消失，并且html_side_main应该出现。我用firebase对其进行检查，就像在js中看到的那样：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    changePage();
  }
  else {
    var main_dashboard_page = document.getElementById("html_side_main");
    main_dashboard_page.style.display = 'none';
  }
});

function changePage() {
  if (document.readyState === "complete") {
  var login_page = document.getElementById("login_page");
  var register_page = document.getElementById("register_page");
  var main_dashboard_page = document.getElementById("html_side_main");

  login_page.style.display = 'none';
  main_dashboard_page.style.display = 'block';

}

我听说CSS在显示元素时具有更高的优先级，我也将CSS放在此处：

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                            F O N T                                          */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

@font-face {
  font-family: Poppins-Regular;
  src: url('../public/fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../public/fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../public/fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../public/fonts/poppins/Poppins-SemiBold.ttf');
}



* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                     L O G I N  P A G E                                      */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
  color: #6a7dfe;
  color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
  color: -o-linear-gradient(left, #21d4fd, #b721ff);
  color: -moz-linear-gradient(left, #21d4fd, #b721ff);
  color: linear-gradient(left, #21d4fd, #b721ff);
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
    margin: 0px;
}

label {
  color: #fff;
}

p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul, li {
    margin: 0px;
    list-style-type: none;
}


/*---------------------------------------------*/
input {
    outline: none;
    border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}


button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}



.card_view {
  width: 100%;
  margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 9px; /* 5px rounded corners */
}

.login_container {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-color: rgba(38, 38, 38, 1);
}

.wrap_login {
  width: 390px;
  background-color: rgba(48, 48, 48, 1);
  border-radius: 10px;
  overflow: hidden;
  padding: 77px 55px 33px 55px;

  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
    border-radius: 9px 9px 0 0;
}

.container {
    padding: 2px 16px;
}

/*------------------------------------------------------------------
[ Form ]*/

.login_form {
  width: 100%;
}

.login_form_title {
  display: block;
  font-family: Poppins-Bold;
  font-size: 30px;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}
.login_form_title i {
  font-size: 60px;
}

input, select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid rgba(48, 48, 48, 1);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: rgba(38, 38, 38, 1);
}

input[type=submit] {
    background-color: rgba(6, 132, 134, 255);
    font-family: Poppins-Medium;
}

input[type=submit]:hover {
    background-color: rgba(8, 160, 163, 255);
    cursor: pointer;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(92, 92, 92, 1);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(92, 92, 92, 1);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(92, 92, 92, 1);
}

input, select, textarea{
    color: #fff;
}

/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
  font-family: Poppins-Regular;
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
}

.txt2 {
  font-family: Poppins-Regular;
  font-size: 13px;
  color: #fff;
  line-height: 1.5;
  cursor: pointer;
}

.txt2:hover {
  color: rgba(6, 132, 134, 255);
}

.center_text_container {
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                     M A I N  P A G E                                        */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.html_side_main {
  float: left;
  height: auto;
  width: 100%;
}

.html_side_main {
  height: 100%;
}

/*TOOLBAR*/

.html_side_main .toolbar {
  list-style-type: none;
  height: 90px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(48, 48, 48, 1);
}

.html_side_main .centered_toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.html_side_main ul {
  list-style-type: none;
  list-style: none;
}

.html_side_main li {
  float: left;
}

.html_side_main a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.html_side_main a:hover {
  color: #cccccc;
}

/* MAIN */

.html_side_main .main_padding {
  padding: 15px;
  width: 100%;
}

.html_side_main .noten_stats {
  height: 200px;
  background: #cc2b5e;
  background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
  background: linear-gradient(to right, #753a88, #cc2b5e);
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ddd;
}

.html_side_main .noten_stats_title {
  color: #ffffff;
  padding: 20px;
  font-family: Montserrat-Medium;
}

.html_side_main .punkte_container{
  height: 80%;
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.html_side_main .punkte {
  color: #ffffff;
  font-size: 50px;
  font-family: Montserrat-Bold;
}

.html_side_main .punkte_text {
  color: #ffffff;
  font-family: Montserrat-Medium;
}

问题：
在js中设置显示选项不起作用。首先显示两个div，并且当用户登录时两个都消失。我不知道为什么，但是请您能帮我解决这个问题吗？因为该网站已基本完成，所以我只需要将其转换为一个html文件即可。
预先感谢。

Answer 1

在isolation of a codepen中，这有效：

function setStyle(propValue){
  console.log(propValue)
  var main_dashboard_page = document.getElementById("html_side_main");

  main_dashboard_page.style.display = propValue
}

因此，这不是js⇄css问题。（如标题所示）

深入研究您的Firebase事件，在代码中添加一些console.log()进行验证，以确保在您期望它们发生时真正被调用。

通常，只要问题仍然存在，请尝试进一步隔离问题（删除所有无关的杂物，即内部和无关的html）...

我听说CSS在显示元素方面具有更高的优先级

不是。 Precedence is （从最低到最高）：

浏览器默认值
外部样式表（如您的样式表）
内部样式表（通常在<head>中使用）
内联样式

... javascript对CSS属性的运行时更改是4.，它们更改了内联样式（在运行时，在DOM构建之后，因此它们也比预先存在的内联样式要高），您也可以使用浏览器的开发工具进行检查。

您的问题要琐碎得多。您的#login_page是您的#html_side_main的父母，因此将其隐藏会隐藏所有内容。您比收盘者短</div>。如果您打算有两个相邻的（不是嵌套的）元素，则可能是在：63行附近。

（这就是为什么隔离又称为衰减的好方法：-）

Answer 2

我建议不要在DOM节点上使用.style。相反，我建议在CSS中创建一个类，例如：

.display-none {
    display: none;
}

，然后通过javascript添加该类：

login_page.className += " display-none";

这样，您将在CSS中拥有所有样式，而在javascript中不会拥有

不显示任何内容，并且无法通过JavaScript进行阻止

2 个答案: