允许用户隐藏打印样式

Question

我有一个为我的客户制作的发票系统，其中包含标题中的敏感数据和第二个div中的订单信息

目前我有这样的风格集：

@media print {
.topbar {
    display:none;
}
}

因此，客户可以打印发票并将其发送给他的客户，而不会在打印页面中显示.topbar中的信息。

他现在希望选择从选择下拉列表中选择客户发票（不包含.topbar中的内容），或打印带有.topbar信息的完整发票以供自己使用。

我被困在如何做到这一点上。我知道如何使用onchange但我不知道用什么方法来禁用，启用（@media print）样式。

任何帮助都会非常感谢，对Tommy来说是

Answer 1

使用JQuery addClass（）和removeClass（）方法。 当您需要隐藏它时，addClass(".topbar")，否则.removeClass(".topbar")

Answer 2

CSS：

 <style type="text/css">
    .topBar { ... }
    @media print { .topBarPrint { display: none; }}
 </style>

<强> HTML：

<div id="topBar" class="topBar topBarPrint">Sensitive Content</div>

然后根据下拉列表的值，使用addClass()和removeClass()添加或删除topBarPrint课程。