Change media query using Javascript

Question

I want to set media queries manually. I have some JavaScript algorithm that tells me what to choose, suppose it is IsMediaA().

@media A { display: block; }
@media B { display: inline-block; }

Is it possible to change used media query depending on IsMediaA() value?

Jędrzej Chałubek · Accepted Answer · 2015-06-05 16:07:26Z

2

Something like this could do the work.

if(IsMediaA()) {

   $('<style />', {
        'text': '@media A { display: block; }'
   }).appendTo('body');

}

but it's a lot better to workaround with some state classes and style it property in css file:

js:

if(IsMediaA()) $('element').addClass('is-mediaA');

css:

@media A {
    element.is-mediaA { display: block; }
}

answered Jun 3, 2015 at 13:22

1,4481 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1