javascript - How to change a css class property value for a specific mediaquery? - Stack Overflow

admin管理员组

文章数量:1425819

I have the class

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

And I want to change the value of width from 20px to 15px with javascript for the mediaquery only. When I do it, it changes the class for all resolution discounting the mediaquery in the CSS.

I have the class

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

And I want to change the value of width from 20px to 15px with javascript for the mediaquery only. When I do it, it changes the class for all resolution discounting the mediaquery in the CSS.

• javascript
• html
• css
• media-queries

Share Improve this question Follow asked Feb 4, 2020 at 7:20 the duckthe duck 45555 silver badges1414 bronze badges 3

• check window.innerWidth then change the width using document.getElementByClassName("foo").style.width = "15px" – DohaHelmy Commented Feb 4, 2020 at 7:24
• 1 can't you directly change in the CSS? why do you need to do it via javascript? – DadyByte Commented Feb 4, 2020 at 7:26
• 1 You could use a media query listener. See developer.mozilla/en-US/docs/Web/API/MediaQueryList/…. – user10510885 Commented Feb 4, 2020 at 7:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can try this:

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

I would suggest making a separate class in CSS for this resolution and add this style to that tag when needed:

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

What I did to workaround the issue. I used a listener on a matchMedia and everytime the browser crosses the limit, I run a JS routine to set the value in my elements (found by the css classname). This way, it works like a media query, but the changing value can be anything.

                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';
                        }
               }

You can't change media query css, but you can make a css property, and set the property using javascript.

This way it only affects the css in the media query.

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>

本文标签： javascriptHow to change a css class property value for a specific mediaqueryStack Overflow