0

Как сделать клик по кнопке, если разрешение экрана по ширине меньше 1600px?

<button onclick="hideme(this)" class="close">X - Закрыть?</button>

2
  • на js проверять размеры экрана перед нажатием learn.javascript.ru/metrics-window, или css через media запросы скрывать кнопки htmlbook.ru/css/value/media
    –  DemoGosha
    27 янв 2019 в 20:46
  • В этом коде если ширина менее заданной выполнить скрипт. Как сверстать чтобы сделать клик ? function resizeScrenn(){ if ($(window).width() <= 779){ $(".icn-nav").click(function(){ $('.navigation').fadeIn(); }); $(".icn-close").click(function(){ $('.navigation').fadeOut(); }); } else{ $('.navigation').fadeIn(); } } resizeScrenn(); $(window).resize(function(){ resizeScrenn(); });
    – Вася
    27 янв 2019 в 20:48

2 ответа 2

1

Например так, (если кнопка с таким классом одна/первая):

check = function() {
    if (window.innerWidth < 1600) {
        document.getElementsByClassName('close')[0].click()
    }
}

document.onload = check;
window.onresize = check;
6
  • Если зашли с ноутбука и разрешение экрана менее 1600px сделать клик по кнопке Или окно браузера сжали менее 1600 пикселей
    – Вася
    27 янв 2019 в 20:45
  • @Helpsetup поправил ответ, но вы имейте ввиду, что это лишь пример. В какой момент следует выполнять такую проверку - вам виднее (её нужно обернуть функцией и положить в нужные ивенты, например window.onresize). 27 янв 2019 в 20:55
  • Если Я это еще знал как ))) В какой момент пр изменении ширины окна браузера
    – Вася
    27 янв 2019 в 20:57
  • Этот трюк всегда сработает? Когда-то мне надо было эмулировать нажатия и оказалось, что Сафари игнорирует программные нажатия, если до этого не было какого-то пользовательского ввода.
    – vusaldev
    28 янв 2019 в 7:47
  • @vusaldev никогда о подобном ограничении не слышал. может быть оно и есть, нужно проверять, но в таком случае Сафари намерено делает решение задачи невозможным (по крайней мере без костылей). 28 янв 2019 в 12:47
1

Можно сделать через matchMedia API

// Что хотим сделать
function eventHandler(mq) {
    if (mq.matches) {
        div.addClass("some-class");
    } else {
        div.classList.add('sss')
    }
}

// Разрешение которое отслеживаем.
const mq = window.matchMedia('screen and (min-width: 768px)')

// вешаем event
mq.addListener(eventHandler)

// проверяем при старте
eventHandler(mq)```
1
  • Я только с div что то не пойму с этим API Это что за что отвечает, если взять мой случай ? div.addClass("some-class"); } else { div.classList.add('sss')
    – Вася
    31 янв 2019 в 22:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.