显示 none 并且阻止通过 JavaScript 不起作用

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）编号：login_page
2）编号：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 在元素显示中具有更高的优先级，所以我也会 post 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）...

As I heared that the css has a higher priority in the display of elements

不正确。 Precedence is从低到高：

浏览器默认值
外部风格sheet（像你的）
内部样式sheet（常见于<head>）
内联样式

...javascript CSS 属性的运行时更改是 4.，它们会更改内联样式（在运行时，在 DOM 构造之后，因此它们是也高于 pre-exisiting 内联样式），因为您还可以使用浏览器的开发工具进行检查。

你的问题要小得多。您的 #login_page 是 #html_side_main 的 parent，因此隐藏它会隐藏所有内容。你差一收 </div> 空头。如果您打算有两个相邻的（未嵌套的）元素，可能意味着在 :63.

行附近的某个地方

（这就是为什么隔离又名阻尼很好:-)

Answer 2

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

.display-none {
    display: none;
}

然后通过 javascript 添加 class:

login_page.className += " display-none";

这样，您的所有样式都会出现在您的 css 中，而不是出现在您的 javascript

中

显示 none 并且阻止通过 JavaScript 不起作用

Display none and block does not work via JavaScript

html

javascript

css

display