Как получить текущее значение CSS, определяемое медиа-запросом в JavaScript?

1

Я разрабатываю сайт, на котором я хочу получить доступ к свойству 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

  • 0
    Является ли JQuery вариант?
  • 1
    @ItayGanor нет, хотел бы придерживаться Javascript, но если jQuery может сделать это, то должен Javascript тоже. Если вы можете указать на соответствующую часть исходного кода jQuery - это поможет.
Показать ещё 5 комментариев
Теги:
media-queries

1 ответ

1

Если я правильно понял исходный вопрос, то желание состоит в том, чтобы читать текущие значения CSS после того, как были учтены настройки @media.

Я считаю, что следующее должно быть достаточным, поскольку оно считывает текущее отображаемое состояние элемента.

window.getComputedStyle($sidebar_content)

Важное примечание. В современных браузерах может быть задержка между установкой стиля или класса и повторным потоком страницы. Поэтому может потребоваться установить тайм-аут и прочитать вычисленное значение после короткой паузы. YMMV.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню