javascript - Internet Explorer: How to modify CSS at runtime for printing? -
imagine webpage enables users show hidden element, using javascript modify css css style @ runtime.
after decision (which includes modification of stlyesheet) user uses printing functionality of browser.
it seems internet explorer not respect changes made in stylesheet before during printing if original css definition located in external file. in other browsers works expected.
please have @ example below, changes style class initial definition display:none
display:inline
@ runtime hence element displayed. when printing page, element remains hidden in internet explorer (tested ie 6,7,8).
do have solution or workaround?
minimalistic example (html file):
<html><head> <link rel="stylesheet" type="text/css" href="minimal.css"> </head><body onload="displaycol();"> <script> function displaycol() { var myrules; if( document.stylesheets[0].cssrules ) { myrules = document.stylesheets[0].cssrules; } else { if ( document.stylesheets[0].rules ) { myrules = document.stylesheets[0].rules; } } myrules[0].style.display = "inline"; } </script> <div class="col0" id="test">this hidden default.</div></body></html>
minimal.css
.col0 { display:none; }
update:
please note decision if object should displayed or not made user - it's not known @ runtime!
have considered using media=print way of getting browser use stylesheet printing?
<link rel="stylesheet" href="print.css" media="print" />
if css changes making same, i.e. can technically store them on separate css file, can use this.
for non-static css, in ie (not sure other browsers/later versions of ie), consider using onbeforeprint event.
see here: http://www.javascriptkit.com/javatutors/ie5print.shtml
Comments
Post a Comment