Javascript设置打印样式表答案

【问题标题】：Javascript set print stylesheetJavascript设置打印样式表
【发布时间】：2011-03-19 12:20:46
【问题描述】：

如何修改打印样式表的对象样式？我正在使用 jQuery，如果有帮助的话。

我基本上想设置一个对象的 css 属性，但该属性仅适用于打印，而不是屏幕。例如$('#myobject').css('background','white','print');

【问题讨论】：

你的问题很不清楚。请发布足够多的代码，以便我们知道您实际尝试做什么。

标签： javascript css stylesheet

【解决方案1】：

这个问题有点含糊，所以我不确定我是否在关注你想要做的事情。您是否尝试动态修改打印对象的样式？

如果是这样，您可以尝试向头部添加样式，如下所示：

$('head').append('<style type="text/css" media="print">Whatever styles</style>');

【讨论】：

如果试图动态地实现这一点，这将是要走的路。如果您因为不知道其他方式而使用 Jquery，请在下面查看我的回答。
根据您的代码示例，您似乎可以将#myobject 设置为在头部打印特定样式表中具有白色背景，例如<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 我只是想确保您'没有使用不必要的 javascript 来完成你可以用 css 做的事情。

【解决方案2】：

您需要将CSSStyleSheet 添加到document.styleSheets 并将media 类型设置为print。 https://developer.mozilla.org/en/DOM/stylesheet

【讨论】：

【解决方案3】：

我认为唯一的方法是在元素上设置一个特殊的 ID 或类，然后在你的打印样式表中为它定义一个样式：

<html><head>
    <style type="text/css" media="print">
    .print_blue { color: blue; }
    </style>
</head><body>

<span id="to_change">This is black text.</span>
<a href="#" onclick="jQuery('#to_change').addClass('print_blue');return false">Click here</a>
to change it to blue for printing.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</body></html>

【讨论】：

【解决方案4】：

在您的应用程序中创建一个打印 css 文件，如下所示：

文件名：print.css

#myobject {
background-color: white;
}

在您的应用程序标头中，包含这样的文件：

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

当我包含样式表时，请注意 media="print"。这只会在打印时将您的白色背景应用于对象。

【讨论】：