使用Javascript更改显示样式(CSS)而不影响打印样式

Question

我有一个Web应用程序,它使用单独的打印样式表来控制页面从打印机出来时的外观.在我最近对网站进行了一些Javascript增强之前,这一点非常有效.其中一项增强功能允许用户冻结页眉和导航以及表头.这背后的Javascript做了一些CSS技巧来冻结屏幕上的元素.不幸的是,应用于position: fixed我的标题(例如)会导致它在每个页面上打印,这不是一个理想的效果.如何在不影响打印样式的情况下使用Javascript调整客户端的元素样式？

@media print { #foo { color: blue; } }               /* Print definition */
@media screen { #foo { color: green; } }             /* Display definition */
document.getElementById('foo').style.color = 'red';  /* Overrides both! */

Answer 1

而不是使用以下方法更改元素的属性:

document.getElementById('foo').style.color = 'red'; 

附加一个新<style>元素,例如:

$('<style>@media screen { #foo { color: green; } }</style>').appendTo('head');

如果可能的话,最好将所有必需的更改连接到一个<style>元素中.

Answer 2

没有好的解决办法！我最终做的是利用IE 中的onbeforeprint和onafterprint功能（我在这里的位置是我们只有 IE 用户）来“解冻”和“重新冻结”元素......

window.onbeforeprint = function() {
  document.getElementById('foo').style.position = 'static';
}

window.onload = window.onafterprint = function() {
  var el = document.getElementById('foo');
  // Get element position and size
  // Set left/top/width/height properties
  // Set position to fixed
  el.style.position = 'fixed';
}