why does the initial state of a div when accessed via javascript has no value?

Question

<!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>

When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.

score 1 · Accepted Answer · answered Apr 29 '21 at 03:54

You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.

Hope this helps, cheers!

PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.

<!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>

but since it is a `div` element doesn't it by default have a display of block? — Bear Bile Farming is Torture, Apr 29 '21 at 03:57
@ganidat - correct, that's why I had that observation in the "PS" note right before the snippet ;) — Chris W., Apr 29 '21 at 04:00
Because your alert is looking for the value of the [style attribute](https://www.w3schools.com/tags/att_style.asp) which is not present on the element in your example. If you want the "computed styles" of an element than you need to query that element differently by [requesting the computed styles](https://stackoverflow.com/questions/8625855/get-all-computed-style-of-an-element). — Chris W., Apr 29 '21 at 04:04

score 1 · Answer 2 · answered Apr 29 '21 at 04:06

Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.

getComputedStyle(dis, "display").display

Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for 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>

why does the initial state of a div when accessed via javascript has no value?

2 Answers2