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();
});

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