Is it possible to create full media query rules on the fly using Javascript or jQuery?

I've used numerous media queries to target generalised viewports and specific devices/screens using inline CSS, imports and linked files:

@media screen and (min-width:400px) { ... }

@import url(foo.css) (min-width:400px);

<link rel=stylesheet type=text/css media=screen and (min-width: 400px) href=foo.css />

I can add/remove classes using jQuery:

$(foobar).click(function(){

  $(h1,h2,h3).addClass(blue);

  $(div).addClass(important);

  $('#snafu').removeClass('highlight');

});

I've also look at document.stylesheets and the seemingly archaic and browser-specific:

  document.styleSheets[0].insertRule(p{font-size: 20px;}, 0)

But I can't find any reference to programatically generating:

  @media screen and (min-width:400px)

from javascript directly or in any form.