title: How to get current css value defined by media query in javascript?
body: <p>I am developing a site where I want to access a menu <code>display</code> property. If the menu is closed (<code>display: none</code>) then I want to  open it, if it's open (<code>display: block</code>) then I want to close it.</p>
  
  <p>I define the menu as closed in responsive media query (if width is higher then menu is always visible with <code>!important</code> in media query), the rest I control in Javascript:</p>
  
  <pre><code>var attach_menu_control = function() {
    var $sidebar = document.querySelector('.sidebar')
    var $sidebar_content = document.querySelector('.sidebar .content')
    var $menu_opener = document.querySelector('.sidebar .menu-closed')
  
    var hide_menu = function() {
      console.log('Hide menu is run.')
      $sidebar_content.style.display = 'none'
      $menu_opener.style.display = 'block'
      $sidebar.style.width = '40px'
    }
  
    var show_menu = function() {
      console.log('Show menu is run.')
      $sidebar_content.style.display = 'block'
      $menu_opener.style.display = 'none'
      $sidebar.style.width = '270px'
    }
  
    var click_handler = function(e){
      console.log('Click handler is run.')
      debugger
      var width = (window.innerWidth &gt; 0) ? window.innerWidth : screen.width;
      if ($sidebar_content.style.display == 'none') { // Here it is `""` instead of `none`
        show_menu()
      } else if (width &lt;= 724) {
        hide_menu()
      }
    }
  
    var $main = document.querySelector('main')
  
    $main.addEventListener('click', hide_menu)
    $sidebar.addEventListener('click', click_handler)
  
    var event = new Event('click');
    $sidebar.dispatchEvent(event)
  }
  </code></pre>
  
  <p>Problem is, the first time this is run - the <code>$sidebar_content.style.display</code> is an empty string <code>""</code> even though if I check it is definitely <code>display: none</code> in media query:</p>
  
  <pre><code>@media only screen and (max-width: 724px) {
  
  
      /* Force sideback to be in closed mode when new page is opened */
      .sidebar {
          width: 40px;
      }
  
      .sidebar .content {
          display: none;
      }
  }
  </code></pre>
  
  <p><strong>Where can I get the values defined by media queries in Javascript?</strong> I don't want to access the rules themselves, I just want to know what's the current set value..</p>
  
  <p>The site is here: <a href="http://www.saulesinterjerai.lt" rel="nofollow noreferrer">www.saulesinterjerai.lt</a></p>