一个文档中的多种打印样式可用于不同的DIV

Question

我在页面上有一个内容滑块，我希望允许站点访问者仅打印他们单击的幻灯片的内容。 我有7张幻灯片，其中两张幻灯片内有一个“打印内容”按钮。 每个幻灯片内容都包含在其自己的div中。

之前，我已经成功使用了特定于打印的样式表，但是不确定如何为一个文档设置不同的打印规则。 我可以使用某种JavaScript或jQuery吗？ 我是两者的新手，但愿意尝试任何尝试。

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

任何帮助表示赞赏。 谢谢！

Answer 1

为您的主要元素设置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();
 });