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

Question

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

Answer 1

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

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

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

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

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

Answer 2

您可以通过执行类似操作来删除所有内联样式

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

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

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

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