Как изменить значение свойства класса css для определенного медиазапроса c?

Question

У меня есть класс

.foo {
  width: 30px;
}
@media only screen and (max-width:768px){
   .foo {
     width: 20px;
   }
}

И я хочу изменить значение ширины с 20px до 15px с javascript только для медиазапроса. Когда я это делаю, он меняет класс для всех разрешений, исключая медиазапрос в CSS.

Answer 1

Я бы предложил создать отдельный класс в CSS для этого разрешения и добавить этот стиль к этому тегу при необходимости:

      if (window.matchMedia("(max-width: 768px)").matches) {
          document.querySelector('.foo').classList.Add("newClass"); }

Answer 2

Вы можете попробовать это:

if (window.matchMedia("(max-width: 768px)").matches) {
  document.querySelector('.foo').style.width = "15px";
}

Answer 3

Что я сделал, чтобы обойти проблему. Я использовал слушателя в matchMedia и каждый раз, когда браузер пересекает ограничение, я запускаю подпрограмму JS, чтобы установить значение в моих элементах (найденное по имени класса css). Таким образом, он работает как медиа-запрос, но изменяемое значение может быть любым.

                var w = 50; // Can change
                // media query event handler
                if (matchMedia) {
                    const mq = window.matchMedia("(max-width:768px)");
                    mq.addListener(WidthChange);
                    WidthChange(mq);
                }

                function WidthChange(mq) {
                    if (mq.matches) {

                        // window width is less than 768px
                        changeFoo('foo', 20);


                    } else {

                        // window width is at least 768px

                        changeFoo('foo', w);

                    }
                }


               function changeFoo(aClass, value) {
                        var c = document.getElementsByClassName(aClass);
                        for(i=0; i < c.length; i++) {
                          c[i].style.width = value + 'vw';
                        }
               }

Answer 4

Вы не можете изменить медиа-запрос css, но вы можете создать свойство css и установить свойство с помощью javascript.

Таким образом, он влияет только на css в медиа-запрос.

const foo = document.querySelector('.foo');

setTimeout(() => {
  // This doesn't affect anything if the window width is above 768px
  foo.style.setProperty('--mobile-width', '15px');
}, 2000);

.foo {
  width: 30px;
  background-color: salmon;
  
  --mobile-width: 20px;
}

@media only screen and (max-width:768px){
   .foo {
     width: var(--mobile-width);
   }
}

<div class="foo">Foo</div>