如何在javascript中获取媒体查询定义的当前css值？

我正在开发一个网站，在那里我想访问一个菜单

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)
}

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

---

该站点位于此处：

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

我认为以下内容应该足够了，因为它读取了元素的当前呈现状态

window.getComputedStyle（$sidebar\u content）

---

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

jQuery是一个选项吗？@ItayGanor不是，他想坚持使用Javascript，但如果jQuery可以做到，那么Javascript也应该如此。如果您可以指向jQuery源代码的相关部分，这会有所帮助。如果您可以在媒体查询中为正确的大小设置样式，那么为什么要使用javascript设置样式？我想你在javascript中需要做的就是在菜单上有一个按钮来切换类的打开/关闭，但是尽量避免在那里设置样式。此外，我也不认为使用

有什么理由这样做！重要信息

谢谢@caramba我已通过您的评论修复了所需内容。我还在用！重要信息，但用于在窗口较宽时强制使菜单可见。不过，一般的问题仍然存在，对于如何从JS获取当前应用于DOM的正确值，人们会感到好奇

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