Generating CSS media queries with javascript or jQuery

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.