Question

我有一个Web应用程序，它使用单独的print stylesheet来控制页面从打印机出来时的外观。在我最近对网站进行了一些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

将!important添加到您的打印规则中。

Answer 3

你可以试试这个 @media print {#foo {color：blue！important; }}

问题是javascript .style.something编辑了元素的内联css，因此它将覆盖正常的css class / id规则。

或者你可以和班级一起工作。 document.getElementById（'foo'）。className ='redText';

并将.redText保存在常规css文件中（而不是打印文件），远比使用！important规则填充print css要好得多。

Answer 4

没有好的解决方案！我最终做的是利用IE中的onbeforeprint和onafterprint函数（我在这里我们只有IE用户的位置）来“解冻”和“重新冻结”元素... < / p>

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';
}

Answer 5

正确的解决方案不是将样式戳到节点上，而是将屏幕特定的样式调整绑定到仅影响屏幕呈现的css类：

@media screen { .freeze { position: fixed; } } /* Display-only definition */

+

document.getElementById('foo').className = "freeze";

作为奖励，这也使得只用一行js就可以很容易地改变大量的样式，这也使得事情变得更快，更容易维护。

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

5 个答案: