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

Question

我在页面上有一个内容 slider ，我想让站点访问者仅打印他们单击的幻灯片的内容。我有 7 张幻灯片，其中两张在幻灯片中有一个按钮，上面写着“打印内容”。每张幻灯片内容都包含在它自己的 div 中。

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

Here is a similar question on SO但没有答案； this one is close但我需要维护 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();
 });