jQuery 可以修改特定媒体类型的 CSS 吗？答案

【问题标题】：Can jQuery modify the CSS for a specific media type?jQuery 可以修改特定媒体类型的 CSS 吗？
【发布时间】：2011-06-23 01:23:55
【问题描述】：

jQuery 是否可以修改特定媒体类型（例如打印）的 CSS？

我的具体问题是我在一个元素上使用了动画，它覆盖了打印样式表，这破坏了我的打印布局。尽管我的问题与提出的一般问题略有不同，但我认为答案应该可以帮助我解决问题。任何可能的解决方法也会有所帮助。非常感谢。

【问题讨论】：

【解决方案1】：

使用隐藏元素的特定规则为您的媒体（打印）添加一个 CSS（例如 #div { display: none; }）

在你的脚本中，如果这样：

$('#div').is(':visible')

是真的，那么你是在印刷媒体上（印刷）。

【讨论】：

聪明的方法。好主意，朱利安。
我不认为这会起作用，至少当你有一个加载页面并点击打印按钮时不会。问题是 dom 不会重新加载，因此不会执行此检查。您可以使用window.matchMedia('print') 并监听媒体变化，但它不是很可靠。
它在 IE8+、Chrome 和 FFox 上运行（测试）。顺便说一句，它不需要重新加载 DOM，因为它是一个 jQuery 扩展（:visible 伪）和纯 Javascript。

【解决方案2】：

您不需要使用 Javascript 来执行此操作。只需在您的 css 文档中使用 @media 规则。您可以将所有这些内容写在一个 CSS 文件中。这里是具体的W3C Documentation

@media screen {

/* all your fancy screen css with a bunch of animation stuff*/

}

@media print {

/* all your fancy print css just plain */

}

您可以编写非常具体的声明并根据您的需要匹配所有元素。顺便说一句，它支持 低至 IE6。在我们的项目中就像一个魅力。

@media print {
   body { font-size: 10pt }
}

@media screen {
   body { font-size: 13px }
}

@media screen, print {
   body { line-height: 1.2 }
}

【讨论】：

不要认为这完全解决了我的问题。假设我按照您的建议设置了样式表。假设我为打印和屏幕指定了不同的宽度。页面显示后，我使用 jquery $(div).animate({width: 100px} 更改宽度。现在当我让浏览器打印时，它将使用新的“100px”宽度而不是打印宽度。希望这是有道理的。
这是解决您问题的正确地址 :) jQuery 将宽度写入 inline-style (...style="width:100px"...)。内联样式的特异性更高。这就是您的浏览器使用内联宽度打印文档的原因。您只需覆盖 (css-tricks.com/override-inline-styles-with-css) 内联样式宽度。事实上，您应该在@media print 中设置您的打印样式。
如果我想在运行时更改指定媒体类型的 div 样式怎么办，例如使用 js。有可能吗？