javascript - 如何获取JavaScript中媒体查询定义的当前CSS值？

Question

我正在开发一个网站，我想在其中访问菜单display属性。如果菜单关闭(display: none)，那么我想打开它，如果它打开(display: block)，那么我想关闭它。

我在响应式媒体查询中将菜单定义为关闭(如果宽度较高，则在媒体查询中使用 !important 菜单始终可见)，其余部分由我在 Javascript 中控制:

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 > 0) ? window.innerWidth : screen.width;
    if ($sidebar_content.style.display == 'none') { // Here it is `""` instead of `none`
      show_menu()
    } else if (width <= 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)
}

问题是，第一次运行时 - $sidebar_content.style.display 是一个空字符串 "" 即使我检查它肯定是 显示:无在媒体查询中:

@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;
    }
}

在哪里可以获取 Javascript 中媒体查询定义的值？我不想访问规则本身，我只想知道当前设置的值是多少。

网站在这里:www.saulesinterjerai.lt

Answer 1

如果我正确理解了原来的问题，那么我们的愿望是在考虑到 @media 设置后能够读取当前的 CSS 值。

我相信以下内容应该足够了，因为它可以读出元素的当前渲染状态。

window.getCompulatedStyle($sidebar_content)

重要说明 - 在现代浏览器中，设置样式或类与页面重新流动之间可能存在延迟。因此，可能需要设置超时并在短暂暂停后读取计算值。 YMMV。