JQuery修改print.css文件的CSS类不生效答案

【问题标题】：JQuery Modifying CSS class for print.css file not taking effectJQuery修改print.css文件的CSS类不生效
【发布时间】：2017-05-29 03:48:23
【问题描述】：

我的页面有两个不同的打印按钮和两种类型的 div 标签：

<button onclick="window.print()">Print Full</button>
<button onclick="PrintPartial()">Print Partial</button>

<div class="not-partial">
    Div Content Here should print for "Print Full" but not for "Print Partial" 
</div>

<div class="no-print">
    This content shouldn't print on either
<div>

我的 print.css 文件中有以下内容

.no-print { display: none; }

下面是我的 PrintPartial() 函数

function PrintPartial() {
    var notPartial = $(".not-partial");
    notPartial.addClass("no-print");
    window.print();
    notPartial.removeClass("no-print");
}

“打印完整”按钮可以正常工作并根据我的 print.css 文件进行打印。正确使用“no-print”类硬编码的 div 不会打印。

但是，“打印部分”按钮打印出来与“打印完整”按钮完全相同。

当我运行我的调试器并进入我的 PrintPartial() 函数时，我可以检查元素并且“no-print”类被添加到正确的元素中。它调用 window.print() 打开打印对话框，并从存储在 notPartial 变量中的元素中删除“no-print”类。

我唯一的想法是 JQuery select 和 addClass 是异步运行的，它的调用 print 在类发生变化之前？如果是这样，我如何确保在 addClass 完成后才调用 window.print。

我尝试在没有 removeClass 步骤的情况下运行它并得到相同的结果，所以我知道这不是我的问题，或者至少不是我唯一的问题。

谁能告诉我我做错了什么以及如何纠正它？

谢谢，斯科特

更新：正如 Pabs123 指出的那样，上面的代码可以正常工作。我遇到了一个问题，即另一段 css（未包含在这篇文章中）导致显示属性被改回。

谢谢

【问题讨论】：

看起来不错 codepen.io/pabs123/pen/YNWEyO 唯一我能想到的是有其他 css 作用于该元素，或者这里没有显示其他一些外部 css
是的，你是对的，我刚刚意识到我的页面上有另一块 CSS 覆盖了 display:none。感谢您的帮助。

标签： javascript jquery html css print-css

【解决方案1】：

抱歉，我在此处发布的代码按预期工作。正如 Pabs123 在他/她的评论中所建议的那样，我还有其他没有包含在帖子中的冲突 css，这正在将显示样式从 display: none 更改回来。因此，正如发布的那样，这并不是一个好问题。对不起。

感谢您的帮助。

【讨论】：