0

я имею блок с классом "preview_main_button" ( <div class="preview_main_button" id="ButtonOnPreview">Перейти ко всем статьям</div> ), но я хочу, чтобы на экранах разрешение которых меньше 769 пикселей его класс менялся на "preview_main_button_2" - каким образом это можно сделать?

1
  • 1
    Правильнее это сделать стилями используя @media.
    – mix
    7 ноя 2019 в 17:21

1 ответ 1

0

Пример взял от сюда https://toster.ru/q/593928

(function() {
    var throttle = function(type, name, obj) {
        obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
             requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };

    /* init - you can init any event */
    throttle("resize", "optimizedResize");
})();

// Событие, сюда ваш код
window.addEventListener("optimizedResize", function() {
    testFunction(); // вызов той самой функции
});


// Функция, чтобы было удобно вызвать
function testFunction() {
    const el = document.getElementById('ButtonOnPreview');

    if (window.innerWidth < 769){
        el.classList.add('preview_main_button_2');
        el.classList.remove('preview_main_button');
    } else {
        el.classList.add('preview_main_button');
        el.classList.remove('preview_main_button_2');
    }

}
// Вызов функции, чтобы она срабатывала при загрузке
testFunction();
    .preview_main_button{
        background: red;
    }
    .preview_main_button_2{
        background: green;
    }
<div class="preview_main_button" id="ButtonOnPreview">Перейти ко всем статьям</div>

Ваш ответ

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

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