Как добавить и удалить класс, используя медиа-запросы на ширине тела? - PullRequest
Новая
       8

Как добавить и удалить класс, используя медиа-запросы на ширине тела?

0 голосов
/ 26 марта 2020

Я пытаюсь добавить класс, если ширина 576px или меньше, и удалить этот класс, когда ширина больше 576px, но он не работает. Что я делаю не так. Пожалуйста помоги. Я делаю это в нескольких файлах.

. php файл: 

<body>
    <h1 id="hello"> Hello </h1>
    <script src="js/functions.js"></script>
    <script>
        matchMedia("(max-width: 576px)").addListener(max_width_f);
        matchMedia("(min-width: 577px)").addListener(min_width_f);
    </script>
</body>

. js файл: 

var h = document.getElementById("hello");
function max_width_f() {
    h.classList.add("no-display");
}
function min_width_f() {
    h.classList.remove("no-display");
}

. css файл: 

.no-display{ display: none; }

1 Ответ

0 голосов
/ 26 марта 2020

Я не уверен, что это работает, но вы пытались проверить ширину вашего h1-элемента внутри скрипта? Это был бы способ, которым я бы попробовал, но я не уверен, что это способ сделать это. 

function max_width_f() {
    if(h.width < 576)
      h.classList.add("no-display");
}
function min_width_f() {
    if(h.width > 577)
      h.classList.remove("no-display");
}

Тогда вы можете просто вызвать функцию в теге скрипта.

...