javascript - 为同一页面的两个部分打印 css

Question

我目前正在使用一些 jquery 通过按钮打开打印对话框:

$('.print').click(function () {
        window.print();
        return false;
    });

这使用带有 media="print"的样式，它在打印之前隐藏特定的 div，如下所示:

#someDiv {
     display:none !important;
}

我想添加另一个按钮来打印这个特定的 div。我有什么选择来实现这一目标？

Answer 1

您可以使用 JavaScript 替换链接标记中对打印 css 的引用。

假设您有两个打印按钮，id 为 print1 和 print2，还有两个样式表 print1.css 和 print2.css。然后您的链接标记如下所示:

<link id="printstyle" rel="stylesheet" href="http://0.0.0.0:3000/print1.css">

和一些 Javascript/jQuery:

$("#print1").click(function(){
  $("#printstyle").attr('href', '/print1.css');
  window.print();
});

$("#print2").click(function(){
  $("#printstyle").attr('href', '/print2.css');
  window.print();
});

您可能需要确保覆盖每个样式表中定义的每个样式。