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

【问题标题】：How to get current css value defined by media query in javascript?如何在javascript中获取媒体查询定义的当前css值？
【发布时间】：2018-04-17 19:12:25
【问题描述】：

我正在开发一个网站，我想在其中访问菜单 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 是一个空字符串 ""，即使我在媒体查询中检查它肯定是 display: none：

@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

【问题讨论】：

可以选择 jQuery 吗？
@ItayGanor 不，想坚持使用 Javascript，但如果 jQuery 可以做到，那么也应该使用 Javascript。如果您可以指向 jQuery 源代码的相关部分 - 这会有所帮助。
Accessing CSS media query rules via JavaScript/DOM的可能重复
如果您可以在媒体查询中为正确尺寸设置所有样式，为什么还要使用 javascript 设置样式？我想你在 javascript 中需要做的就是有一个按钮来切换菜单上的类打开/关闭，但尽量避免在那里设置样式。我也看不出有理由使用!important
感谢@caramba 我修复了您的评论所需的内容。我仍然使用 !important 但在窗口很宽时强制菜单可见。一般问题仍然存在，并且会很好奇如何从 JS 获取当前应用于 DOM 的正确值

标签： javascript css media-queries

【解决方案1】：

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

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

window.getComputedStyle($sidebar_content)

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

【讨论】：