JavaScript при изменении ширины клика по классам

Question

Если я нажимаю кнопку, я могу назначить ей такую ​​функцию, как ниже

document.getElementById("mySidenav").style.width = "250";

Это работает нормально, однако я хотел бы дать ей другую ширину для разных размеров экрана, поэтому я собирался установить ширинув классе, так что я могу использовать медиа-запрос CSS.вместо .style.width = "250"; как я могу сказать, что он должен принимать значения класса CSS?>

Answer 1

Я использовал ответ @ Shenh, чтобы найти решение +1 Sheng.

Пожалуйста, смотрите ниже, я добавил новый класс и удалил класс

    function openNav() {
    document.getElementById("mySidenav").classList.add('popoutwidth');
    }

   function closeNav() {
    document.getElementById("mySidenav").classList.remove('popoutwidth');
   }

Answer 2

Только для справки, имена CSS не могут начинаться с цифр, согласно спецификации W3C .Ваш отредактированный пост устраняет необходимость в этом комментарии, но стоит отметить.

Чтобы манипулировать классами с помощью JavaScript, используйте className (как в myElement.className = 'some-class') или classList интерфейс,Тем не менее, вы специально упомянули «разные размеры экрана», и это главный кандидат для отзывчивых CSS-запросов с использованием селектора @media .

С учетом всего сказанного:

Пример JavaScript

// CSS
#mySidenav {
     width: 1000px;
}

#mySidenav.responsive-class {
     width: 500px;
}

// JS

const mySidenav = document.querySelector('#mySidenav');

window.addEventListener('resize', function() {
     if (window.innerWidth < 200) {
          mySidenav.classList.add('responsive-class');
     }
     else {
          mySidenav.classList.remove('responsive-class');
     }
});

Пример CSS

#mySidenav {
     width: 1000px;
}

@media query and (max-width: 200px) {
     #mySidenav {
          width: 500px;
     }
}

Как видите, последний пример намного проще.Перейти с подходом CSS.Над вами появится ореол.