为什么通过javascript访问div时，div的初始状态没有值

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      body {
      color: white;
      background-color: #1E1B1B;
      border-color: grey;
      }
      .navbar {
      height: 50px;
      border-bottom: 2px solid grey;
      margin-bottom: 10px;
      display: block;
      }
      button.nav-btn {
      float:right;
      background-color: transparent;
      border: 1px solid grey;
      color: white;
      padding: 5px 12px;
      font-size: 30px;
      cursor: pointer;
      float: left;
      }
    </style>
    <script>
          function toggleToolNav() {
          var dis = document.getElementsByClassName("navbar")[0]
          alert(dis.style.display)
          }
    </script>
  </head>
  <body>
    <div class="navbar">
      <button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
    </div>
  </body>
</html>

按下左上角按钮时，报警弹出框不打印任何内容，表明navbar没有显示。但是navbar是div元素，display = block在CSS代码中显式设置。

您没有返回值，因为style属性在此实例中不包含任何值。例如，如果我们将display: block作为style属性(如style="display: block"(移动到元素中，那么它将返回您所期望的值。请参阅提供的示例，但行为是意料之中的。

希望这有帮助，干杯！

PS-默认情况下，div是一个块元素，不需要在css中定义它，除非出于任何原因覆盖默认值。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      body {
      color: white;
      background-color: #1E1B1B;
      border-color: grey;
      }
      .navbar {
      height: 50px;
      border-bottom: 2px solid grey;
      margin-bottom: 10px;
      }
      button.nav-btn {
      float:right;
      background-color: transparent;
      border: 1px solid grey;
      color: white;
      padding: 5px 12px;
      font-size: 30px;
      cursor: pointer;
      float: left;
      }
    </style>
    <script>
          function toggleToolNav() {
          var dis = document.getElementsByClassName("navbar")[0];
          console.log(dis);
          alert(dis.style.display);
          }
    </script>
  </head>
  <body>
    <div class="navbar" style="display: block">
      <button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
    </div>
  </body>
</html>

看起来您想要获得CSS computedStyle。您可以使用getComputedStyle返回一个对象，该对象包含所述元素的所有CSS属性的值。

getComputedStyle(dis, "display").display

将返回元素css中的显示规则集。正如Chris W在前面的回答中所解释的那样，如果您使用el.style.display，它正在寻找用于显示的内联样式规则。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      body {
      color: white;
      background-color: #1E1B1B;
      border-color: grey;
      }
      .navbar {
      height: 50px;
      border-bottom: 2px solid grey;
      margin-bottom: 10px;
      display: block;
      }
      button.nav-btn {
      float:right;
      background-color: transparent;
      border: 1px solid grey;
      color: white;
      padding: 5px 12px;
      font-size: 30px;
      cursor: pointer;
      float: left;
      }
    </style>
    <script>
          function toggleToolNav() {
          var dis = document.getElementsByClassName("navbar")[0]
          alert(getComputedStyle(dis, "display").display)
          }
    </script>
  </head>
  <body>
    <div class="navbar">
      <button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
    </div>
  </body>
</html>

相关内容

最新更新

热门标签：