想象一个网页，它允许用户在运行时使用 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>
最小.css
.col0 {
display:none;
}
更新:
请注意，是否应显示对象的决定是由用户做出的 - 在运行时是未知的!
最佳答案
您是否考虑过使用 media=print 方式让浏览器使用专门用于打印的样式表？
<link rel="stylesheet" href="print.css" media="print" />
如果您所做的 css 更改始终相同，即您可以在技术上将它们存储在单独的 css 文件中，那么您可以使用它。
对于非静态 CSS，在 IE 中(不确定其他浏览器/更高版本的 IE)，可以考虑使用 onbeforeprint 事件。
请参见此处:http://www.javascriptkit.com/javatutors/ie5print.shtml
关于javascript - 互联网浏览器 : How to modify CSS at runtime for printing?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5094305/