javascript - 一个文档中针对不同 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();
 });