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! */

Note: A lot of the styles I change with Javascript are not even set in the CSS print file. Ideally, I would have a way to change only display styles in Javascript. Having to manually override all the JS tweaks in the CSS print file with !important is not really a solution. — Josh Stodola
– Josh Stodola, Commented Jun 13, 2011 at 19:59

thirtydot · Accepted Answer · 2011-06-13 20:20:11Z

6

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.

answered Jun 13, 2011 at 20:20

thirtydot

229k51 gold badges393 silver badges354 bronze badges

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

1 Comment

Oliver Bock Over a year ago

Great idea. I have tested this on IE6, IE9, Chrome and FF5.

Daniel A. White · Accepted Answer · 2011-06-13 19:52:08Z

2

Add !important to your print rules.

answered Jun 13, 2011 at 19:52

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

3 Comments

Josh Stodola Over a year ago

Huh? That's not going to do anything. I don't even set position (or any of the other things I am tweaking with Javascript) in my CSS rules.

Josh Stodola Over a year ago

I suppose this means I will have to override every style I tweak with Javascript? I can see where that's headed! So next year when I have to change the Javascript I will forget to change the CSS override... Ug-leeeee

Josh Stodola Over a year ago

By the way, I tried adding this and set position: static !important to avoid the fixed positioning on print, and now it crashes IE every single time I try to print or preview!

Pantelis · Accepted Answer · 2011-06-13 19:56:06Z

1

You can try this @media print { #foo { color: blue !important; } }

The problem is that javascript .style.something, edits the inline css of the element, therefore it will override the normal css class/id rules.

Or you can, work with classes. document.getElementById('foo').className = 'redText';

and keep the .redText in your regular css file (not the print one), much much better than filling your print css with !important rules.

answered Jun 13, 2011 at 19:56

Pantelis

6,1561 gold badge20 silver badges22 bronze badges

4 Comments

Josh Stodola Over a year ago

Thanks for the more complete answer. I'm sad there's not a cleaner way, something like document.getElementById('foo').displayStyle.color = 'green';

Pantelis Over a year ago

Unfortunately there is not, no. But working with classes is actually very clean. Because when you get back later to do some maintenance you will find all the styling rules in the CSS (where they semantically belong), instead of having to edit both your CSS and JS file.

Josh Stodola Over a year ago

Not really an option. If you think about freezing an element on the page, you have to fix the position, and then set its precise coordinates within the parent. If the content of these elements varies from page to page, you can't predict the size it will take up (if you are using any sort of flow layout), so the changes have to be made dynamically in Javascript. I'm stuck.

Pantelis Over a year ago

Well, then you might want to try this, snippets.dzone.com/posts/show/3817 Create and append css rules with javascript. I am not sure if it works on all browsers. But it is certainly worth a try.

Josh Stodola · Accepted Answer · 2011-06-15 18:44:58Z

1

No good solution! What I ended up doing is utilizing the onbeforeprint and onafterprint functions in IE (I am in the position here that we only have IE users) to "unfreeze" and "refreeze" the elements...

window.onbeforeprint = function() {
  document.getElementById('foo').style.position = 'static';
}

window.onload = window.onafterprint = function() {
  var el = document.getElementById('foo');
  // Get element position and size
  // Set left/top/width/height properties
  // Set position to fixed
  el.style.position = 'fixed';
}

answered Jun 15, 2011 at 18:44

Josh Stodola

82.7k48 gold badges187 silver badges229 bronze badges

1 Comment

thirtydot Over a year ago

html5shiv does something similar to enable support for printing HTML5 elements in the older versions of IE. So, the technique is robust.

ecmanaut · Accepted Answer · 2013-09-11 22:48:05Z

0

The proper solution is not to poke styles onto nodes, but to instead tie your screen-specific style tweaks to css classes that only affect your screen rendition of things:

@media screen { .freeze { position: fixed; } } /* Display-only definition */

+

document.getElementById('foo').className = "freeze";

As a bonus, this also makes it easy to change tons of styles with just one line of js, which makes things faster and easier to maintain, too.

answered Sep 11, 2013 at 22:48

ecmanaut

5,1682 gold badges47 silver badges67 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related