jquery - 允许用户隐藏打印样式

Question

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

目前我有这个样式集:

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

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

他现在想要从选择下拉列表中选择客户发票(没有 .topbar 中的内容)或打印带有 .topbar 信息的完整发票供他自己使用。

我一直在思考如何去做这件事。我知道如何使用 onchange 但我不确定使用什么方法来禁用、启用 (@media print) 样式。

任何帮助将不胜感激，问候 Tommy

Answer 1

CSS:

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

HTML:

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

然后使用 addClass() 添加或删除 topBarPrint 类和 removeClass()取决于下拉菜单的值。