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?

Answer 1

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