Internet Explorer: How to modify CSS at runtime for printing?_问答_开发者

Imagine a webpage which enables users to show an hidden element, using javascript to modify css a CSS style at runtime.

After his decision (which includes the modification of the stlyesheet) the user uses the printing functionality of his browser.

It seems that Internet Explorer does not respect the changes made in the stylesheet before during printing if the original css definition is located in an external file. In other Browsers everything works as expected.

Please have a look at the example below, which changes a style class from its initial definition display:none to display:inline at runtime hence the element will be displayed. But when printing this page, the element remains hidden in internet explorer (tested with IE 6,7,8).

Do you have a solution or workaround?

Minimalistic example (html file):

<html><head>
<LINK rel="s开发者_StackOverflow社区tylesheet" 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 is hidden by default.</div></body></html>

minimal.css

.col0 {
  display:none;
}

UPDATE:

Please note that the decision if the object should be displayed or not is made by the user - it's not known at runtime!

Have you considered using the media=print way of getting the browser to use a stylesheet specifically for printing?

<link rel="stylesheet" href="print.css" media="print" />

If the css changes you are making are always the same, i.e. you can technically store them on a separate css file, then you can use this.

For non-static CSS, in IE (not sure about other browsers/later versions of IE), you could consider using the onbeforeprint event.

See here: http://www.javascriptkit.com/javatutors/ie5print.shtml

Instead of using javascript to change the stylesheet rules, use scripting to apply and remove classes to the elements that need to be displayed. Remember that an element can have more than one class applied to it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Demo</title>
    <style type="text/css">
        .col0 {display:none;}
        div.showCol {display: inline;}
    </style>
    <script type="text/javascript">
        function displayCol() {
            document.getElementById("test").className += " showCol";
        }
    </script>
</head>
<body onload="displayCol();">
    <div class="col0" id="test">This is hidden by default.</div>
</body>
</html>

This answer to another question does a great job laying out different ways to do this with scripting: Change an element's class with JavaScript

You could try using a specific style sheet for printing, for example:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

EDIT - too slow :)

Javascript is not being evaluated when printing. It will look just like when Javascript is turned off. You need an extra media=print stylesheet and make any necessary changes there.

If that is not an option, you could create a link that will generate a static page that will look like it's supposed to for that particular user.

Based off your example scenario - in your style sheet add:

.col0 {
    display: none;
}

body.showColumn .col0 {
    display: inline;
}

Then simply toggle the .showColumn class on your body, and the column's visibility will be toggled accordingly.

Internet Explorer: How to modify CSS at runtime for printing?

精彩评论

关注公众号

热门标签

图文推荐

Internet Explorer: How to modify CSS at runtime for printing?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：