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是一个空字符串""，即使我在媒体查询中检查它肯定是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

Answer 1

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

我相信以下内容应该足以读出元素的当前渲染状态。

window.getComputedStyle($sidebar_content)

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

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

1 个答案: