Use Javascript to Change Display Styles (CSS) Without Affecting Print Styles

Question

I have a web application that utilizes a separate print stylesheet to control how the page looks when it comes out of the printer. That was working wonderfully until I recently made some Javascript enhancements to the site. One of these enhancements allows the user to freeze the page header and navigation, as well as table headers. The Javascript behind this does some CSS trickery to freeze the elements on the screen. Unfortunately, applying position: fixed to my header (for example) causes it to print on every page, and this is not a desired effect. How can I use Javascript to tweak element styles on the client-side without affecting the print style?

@media print { #foo { color: blue; } }               /* Print definition */
@media screen { #foo { color: green; } }             /* Display definition */
document.getElementById('foo').style.color = 'red';  /* Overrides both! */

Answer 1

Instead of changing properties on your elements with this:

document.getElementById('foo').style.color = 'red'; 

append a new <style> element, for example:

$('<style>@media screen { #foo { color: green; } }</style>').appendTo('head');

It would be better to concatenate all your required changes into one <style> element, if possible.