Question

我在页面上有一个内容滑块，我想允许网站访问者只打印他们点击的幻灯片的内容。我有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();
 });

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

1 个答案: