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

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>元素，如果可能的话。