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

Question

[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";
}
});

Answer 1

[Beliyadm]

Ну или если уж очень хотите извращаться на JS вместо медиа запросов на CSS - вот пример

var mql = window.matchMedia('all and (max-width: 479px)');
if (mql.matches) {
    // размер окна 479px или меньше
} else {
    // нет, размер окна более 479px
}

Comments

[Voldemar_pauk]

Да я знаю про медиа-запросы.
Но мне нужно что бы скрипт по другому работал.

div{
background:black;
 }

var body=document.getElementById('body')
if(body>'500px'){      //боди(ширина экрана) меньше 500 пикселей
 //кнопка нажимается{
        //элемент меняет цвет на синий
}
else{ кнопка нажимается, элемент меняет цвет на белый}
}

тип такого

[Beliyadm]

Voldemar_pauk, А, ну тогда мой пример именно это и будет делать, можете сделать несколько mql для разных размеров и для каждого прописать нужное условие на if (mql.matches) (меняя переменную mql соотствтенно)

[Voldemar_pauk]

Beliyadm,

var mql=window.matchMedia('all and (max-width:500px;)');
if(mql){
ww.onclick=function(){
alert('да')
}
}
else{
ww.onclick=function(){
alert('нет')
}
}

Всё равно не работает, уже кучу вариаций перепробовал
Выводит только 'да' при любых разрешениях экрана

[Beliyadm]

Voldemar_pauk,
Не if(mql)
А
if(mql.matches)

Еще одно но - этот JS отрабатывает при загрузке страницы, если на лету меняете размер браузера - эффекта не будет (да и не требуется), тестировать через ф5

[Voldemar_pauk]

Beliyadm, Всё работает спасибо

Answer 2

[Алексей Джо]

https://developer.mozilla.org/ru/docs/Web/CSS/Medi...