使用 javascript 打印隐藏在屏幕上的部分答案

【问题标题】：Print sections that were hidden on the screen with javascript使用 javascript 打印隐藏在屏幕上的部分
【发布时间】：2011-03-25 15:13:09
【问题描述】：

我遇到了一个以前没有遇到过的小问题：我使用 javascript (jQuery) 在网页的选项卡中显示不同的信息部分。所以我正在做的是隐藏没有被查看的标签，只显示正在查看的标签。

这很好用，但现在我要添加一个特定于打印的样式表，并且我想打印所有选项卡的信息，而不仅仅是正在查看的选项卡。

如何撤消对打印样式表这些部分的 javascript 隐藏？

编辑：一些附加信息：

我正在使用 jQuery 隐藏所有 div.tabs sections 并在我的打印样式表中设置：

.wrapper div.tabs sections {
    display: block;
}

假设.wrapper div.tabs sections 的值高于div.tabs sections 将使这些部分可见。但它没有...

【问题讨论】：

【解决方案1】：

最好的方法是更改 JavaScript，使其修改应用于元素的类而不修改 .style.display。然后，您可以使用屏幕和打印媒体样式表以不同方式定位具有这些类的元素。

快速而肮脏的方法是在您的印刷媒体样式表中使用!important。

【讨论】：

谢谢，!important 工作！我已经编辑了我的问题，但现在我很困惑为什么 !important 有效，但我的更具体/更高值的选择器却没有。
顺便说一句，你最好的方法似乎是合乎逻辑的方法，为什么我没有想到...
@jeroen — 没有比 style 属性更具体的了，.style.foo 修改了 style 属性。无论你用 jQuery 做什么，几乎可以肯定是在修改 .style.foo。

【解决方案2】：

您真正需要的只是 CSS。只需定义一些在打印时显示的内容。

这里和例子：

@media print {
    div.print_show{ dispay: block; }
    span.print_show{ display: inline; }
    .print_hide{ display: none; }
}

【讨论】：

【解决方案3】：

您可以添加一个额外的类来将 display:block 添加到您的 print.css..

【讨论】：