@Voldemar_pauk

Как изменить работу скрипта, который зависит от ширины экрана?

Хочу изменить скрипт. Он работает по такому типу: Если ширина body <> 500px то свойство при нажатии кнопки будут разными
Кнопка нажата body 300px элемент становится синим цветом;
кнопка нажата body 800px элемент становится зелёным.

Написал такой код,но работает только 1 условие и при переключении на моб.устройства скрипт не учитывает размер body и не меняет изменяемые свойства.
let body_width=document.getElementById('body').style.width;
let width=850;
const button_on=document.getElementById('ww');
button_on.addEventListener('click' ,()=>{
if (body_width>width){
document.getElementById('tv3').style.display="block";
document.getElementById('tv3').style.width="90%";
document.getElementById('tv3').style.background="green";
}
else{
document.getElementById('tv3').style.display="block";
document.getElementById('tv3').style.width="90%";
document.getElementById('tv3').style.background="blue";
}
});
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
beliyadm
@beliyadm
Ну или если уж очень хотите извращаться на JS вместо медиа запросов на CSS - вот пример
var mql = window.matchMedia('all and (max-width: 479px)');
if (mql.matches) {
    // размер окна 479px или меньше
} else {
    // нет, размер окна более 479px
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы