javascript - 更改页面元素后出现 window.print 问题

Question

我在使用 javascript 提供的打印功能时遇到了麻烦:它无法打印当前页面。

从一开始:页面的目的是获取用户的输入，处理它并显示结果。事实上，它是一个带有几个输入字段的简单表单。在 jquery 的帮助下，解释用户给出的输入并显示结果。如果输入令人满意，则会在 div 容器中显示绿色背景上的加号。如果没有，则会显示红色背景上的减号。

现在，问题是:为用户提供了一个打印按钮。这不是21世纪，而是一个要求。由于 print.css，打印输出看起来相当不错。但有一个问题:div 容器仅以其未处理的形状出现。 无论用户输入什么，div 容器都会以其初始状态打印(即:灰色背景)。

div 容器通过使用jquery 函数addclass() 或removeclass() 进行更改。在屏幕上，一切正常。但是处理用户输入后查看源代码仍然显示出未更改的 div 容器。因此打印结果达不到目的。

如何说服浏览器打印更改后的 div 容器而不是初始容器(就像加载页面时那样)？我在这里缺少什么？

为了帮助您，让我们看一下源代码的关键部分:

a) css 文件如何链接:

<link rel="stylesheet" href="styles/standard.css">     
<link rel="stylesheet" media="print" href="styles/print.css" />

b) 如何处理打印按钮:

$('a#print').click(function(e){        
    e.preventDefault();        
    window.print(); 
});

c) 如何更改 div 容器:

$('div#result').addClass('res_red'); 
$('div#result').removeClass('res_green'); 
$('div#result').removeClass('res_zero');

再次:屏幕上一切正常。只是打印输出一团糟......

Answer 1

我不明白。您是否将 print.css 加载到所有用户？或者只是谁点击了“打印”按钮？

您的代码没有任何问题。我担心它只是 css 规则不正确应用。(也许有些!重要或者只是覆盖不够强大*)

*覆盖不够强大的示例:

CSS:

div.container div.class-a:hover {
color: grey;
}
.container div:hover {
color: red;
}

由于选择器不够强大，最后一个类将不会覆盖第一个类。因此，尽管最后一个类写在下面，但悬停时颜色仍保持灰色。