一个文档中针对不同DIV的多种打印样式

Multiple print styles in one document for different DIVs

本文关键字：DIV 样式 打印 一个 文档      更新时间：2023-09-26

我在页面上有一个内容滑块，我想让网站访问者只打印他们点击的幻灯片的内容。我有7张幻灯片，其中两张幻灯片中有一个按钮，上面写着"打印内容"。每张幻灯片的内容都包含在自己的分区中。

我以前曾成功地使用过特定于打印的样式表，但不确定如何为一个文档设置不同的打印规则。我可以应用某种JavaScript或jQuery吗？我对这两者都是新手，但我愿意尝试任何东西。

这里有一个关于SO的类似问题，但没有答案；这个很接近，但我需要维护CSS样式。

任何帮助都将不胜感激。非常感谢。

为主要元素设置CSS规则：

@media print {
  div.main-element: display: none;

然后添加另一条规则：

  div.main-element.print-me: display: block;

现在，您可以在内容的每个部分添加一个"打印"按钮，并让一个处理程序适当地调整类：

 $('body').on('click', '.main-element button.print', function() {
   $('.main-element').removeClass('print-me');
   $(this).closest('.main-element').addClass('print-me');
   window.print();
 });
相关文章：