Internet Explorer：如何在运行时修改 CSS 以进行打印？答案

【问题标题】：Internet Explorer: How to modify CSS at runtime for printing?Internet Explorer：如何在运行时修改 CSS 以进行打印？
【发布时间】：2011-07-02 22:22:43
【问题描述】：

想象一个网页，它允许用户显示隐藏元素，在运行时使用 javascript 修改 css 一种 CSS 样式。

在做出决定（包括修改样式表）后，用户使用其浏览器的打印功能。

如果原始 css 定义位于外部文件中，Internet Explorer 似乎不尊重在打印之前对样式表所做的更改。在其他浏览器中，一切正常。

请看下面的示例，它在运行时将样式类从其初始定义display:none 更改为display:inline，因此将显示该元素。但是在打印此页面时，元素仍然隐藏在 Internet Explorer 中（使用 IE 6、7、8 测试）。

您有解决方案或解决方法吗？

简约示例（html 文件）：

<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 is hidden by default.</div></body></html>

minimal.css

.col0 {
  display:none;
}

更新：

请注意，是否显示对象由用户决定 - 在运行时不知道！

【问题讨论】：

它不起作用，因为样式应用于可见屏幕而不是打印（当您单击打印预览时，网页会重新加载以准备使用默认 css 作为值进行打印）。我建议您使用带有 media="print" 的 css 并有条件地使用特定版本的 Internet Explorer。
@RoBYCoNTe 我已经更新了问题 - 是否应该显示对象的决定由用户完成。如果他决定显示对象 displayCol() 将被调用 - 但它只在屏幕上显示对象而不在打印机上显示。
@MR：你解决过这个问题吗？我有同样的问题。我使用 jquery 的 .toggle() 方法来切换部分发布页面加载的可见性。该部分不会在 FF/Chrome 上打印（如预期的那样），但仍会在 IE 上打印。您对此有解决方案吗？（我讨厌 IE）

标签： javascript html css browser cross-browser

【解决方案1】：

您是否考虑过使用 media=print 方法让浏览器使用专门用于打印的样式表？

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

如果您所做的 css 更改始终相同，即您可以在技术上将它们存储在单独的 css 文件中，那么您可以使用它。

对于非静态 CSS，在 IE 中（不确定其他浏览器/IE 的更高版本），您可以考虑使用 onbeforeprint 事件。

请看这里：http://www.javascriptkit.com/javatutors/ie5print.shtml

【讨论】：

是的。不幸的是，引入 media="print" 样式也对我没有帮助。请注意，是否应该显示对象的决定是由用户做出的——它不是静态的！很抱歉，问题中没有明确指出这一点。
@MRal：啊，我明白了。你试过弄乱 DOM 吗？（不是我推荐的）。
@MRal：显然 IE 支持 onbeforeprint 事件。您可以尝试使用它（请参阅我的答案中的链接）。
@Moron：这对我没有帮助，因为我不需要拦截打印。在用户决定打印之前，css 已经正确更改。问题是 IE 似乎不尊重对打印样式表所做的更改。
@Mral：您在此活动期间所做的任何更改都可能会被 IE 尊重以进行打印。当然我没试过。毕竟，这个事件是专门为动态确定要打印的内容而设计的。如果这不起作用，您可能可以在此事件期间更改 DOM。警告：同样，我自己没有尝试过。

【解决方案2】：

不要使用 javascript 来更改样式表规则，而是使用脚本对需要显示的元素应用和删除类。请记住，一个元素可以应用多个类。

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

这个对另一个问题的回答很好地展示了使用脚本执行此操作的不同方法：Change an element's class with JavaScript

【讨论】：

虽然这似乎可行 - 这意味着我必须找到并遍历 DOM 树中的所有对象并更改它们的类，这可能是资源密集型的。因此，我发现简单地更改 CSS 定义非常优雅。
@MRalwasser 这取决于您的具体情况，但通过其 ID 查找元素的影响确实很小。如果您要更改许多元素，也许它们有一个共同的父元素可以应用一个类？

【解决方案3】：

您可以尝试使用特定的样式表进行打印，例如：

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

编辑 - 太慢了:)

【讨论】：

这并不能解决我的问题。请查看更新后的问题。

【解决方案4】：

打印时未评估Javascript。它看起来就像关闭 Javascript 时一样。您需要一个额外的 media=print 样式表并在那里进行任何必要的更改。

如果这不是一个选项，您可以创建一个链接，该链接将生成一个静态页面，该页面看起来应该适合该特定用户。

【讨论】：

我不是在打印期间而是在之前尝试评估 JavaScript。在 Firefox 中，一切都按预期工作，所以这是一个浏览器问题。

【解决方案5】：

根据您的示例场景 - 在您的样式表中添加：

.col0 {
    display: none;
}

body.showColumn .col0 {
    display: inline;
}

然后简单地切换身体上的 .showColumn 类，列的可见性将相应地切换。

【讨论】：