Javascript, display:block and print stylesheets
Posted by Dan Eastwell
Why should classes be used instead of inline CSS declarations?
If you're trying to hide an item using javascript, why is it better practice to add and remove a class rather than setting the style attribute to display:none and then display:block?
Firstly, it's good practice to separate presentation (the CSS) from behaviour (the Javascript) (which is easier said than done when there are dependencies between the two).
Secondly, and the main practical reason, is that it's impossible, in my experience to overrule inline javascript with a print stylesheet, due to the order of the cascade.
For example, if you use javascript on the DOM being ready to hide all elements that may later be shown on click, you cannot show all these elements when printing by changes in the print stylesheet
If you're adding classes, though, you can redefine that class within your print stylesheet to show the items that were hidden on load.
I've been told, although this is untested that adding display:block !important to your style declaration will override the javascript inline style.
