如何获取由JavaScript中的媒体查询定义的当前CSS值? [英] How to get current css value defined by media query in javascript?

问题描述

我正在开发一个要访问菜单display属性的站点.如果菜单已关闭(display: none)，那么我想将其打开；如果菜单已打开(display: block)，则我想将其关闭.

I am developing a site where I want to access a menu display property. If the menu is closed (display: none) then I want to open it, if it's open (display: block) then I want to close it.

在响应式媒体查询中，我将菜单定义为关闭的菜单(如果宽度更大，则菜单始终在媒体查询中显示为!important)，其余部分则由Javascript控制:

I define the menu as closed in responsive media query (if width is higher then menu is always visible with !important in media query), the rest I control in 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，也是如此:

Problem is, the first time this is run - the $sidebar_content.style.display is an empty string "" even though if I check it is definitely display: none in media query:

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

在哪里可以获取Java中媒体查询定义的值?我不想自己访问规则，只想知道当前的设置值是什么..

Where can I get the values defined by media queries in Javascript? I don't want to access the rules themselves, I just want to know what's the current set value..

站点在这里: www.saulesinterjerai.lt

推荐答案

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

If I understand the original question correctly, then the desire is to be able to read the current CSS values once @media settings have been taken into account.

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

I believe that the following should suffice as it reads out the current rendered state of the element.

window.getComputedStyle($sidebar_content)

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

Important note - In modern browsers, there can be a delay between setting a style or class, and the re-flow of the page. It may therefore be necessary to set a timeout and read the computed value after a short pause. YMMV.

这篇关于如何获取由JavaScript中的媒体查询定义的当前CSS值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！