Question

我有一个带有'打印机友好'按钮的页面，该按钮使用jQuery的.css（）方法从特定元素中删除一些背景和边框，并更改字体大小。我可以设置另一个.css（）方法将所有内容更改回原来的样式，但有没有简单的方法可以将页面上的所有内容恢复为原始CSS（除了刷新页面）？

Answer 1

您应该在主css文件中将打印友好样式定义为选择器规则

body.printfriendly .selector .rule
{
  font-size:bigger;
}

然后您可以在body标签上添加和删除printfriendly类来显示或隐藏规则。

您还可以使用@media print部分声明仅在用户打印时应用的规则。

@media print 
{
   .selector .rule
   {
     font-size:bigger;
   }
}

Answer 2

您可以通过执行类似

的操作来删除所有内联样式

$('*[style]').removeAttr('style');

它将删除jQuery设置的所有样式，但也可能删除HTML中设置的任何其他内联样式。不是我推荐它。

据我所知，您可能不想使用打印样式表。有些用户希望在看到页面时打印页面，并且您可能希望在实际打印之前添加预览。

我建议您使用可以切换到.printfriendly标记的body课程。这样你就可以完全控制CSS和表示层。

Answer 3

您可以使用.removeClass删除附加的课程

.addClass('printFriendly');

.removeClass('printFriendly');

Answer 4

为什么不使用构建在屏幕样式表之上的打印样式表？这会更清洁：

HTML模板中的

：

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

在你的print.css中：

@import "screen.css";
// overwrite disired parts of your screen.css

现在您可以使用以下javascript命令添加按钮：

document.print();

打开浏览器默认打印promt。

Answer 5

打印机友好按钮非常古老。 CSS 2具有media rule机制。

@media print {
  /* style sheet for print goes here */
}

使用jQuery恢复到页面的原始CSS

5 个答案: