Я разрабатываю сайт, на котором я хочу получить доступ к свойству 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
Если я правильно понял исходный вопрос, то желание состоит в том, чтобы читать текущие значения CSS после того, как были учтены настройки @media.
Я считаю, что следующее должно быть достаточным, поскольку оно считывает текущее отображаемое состояние элемента.
window.getComputedStyle($sidebar_content)
Важное примечание. В современных браузерах может быть задержка между установкой стиля или класса и повторным потоком страницы. Поэтому может потребоваться установить тайм-аут и прочитать вычисленное значение после короткой паузы. YMMV.