我在使用 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');
再次:屏幕上一切正常。只是打印输出一团糟......
最佳答案
我不明白。 您是否将 print.css 加载到所有用户?或者只是谁点击了“打印”按钮?
您的代码没有任何问题。我担心它只是 css 规则不正确应用。
(也许有些!重要
或者只是覆盖不够强大*)
*覆盖不够强大的示例:
CSS:
div.container div.class-a:hover {
color: grey;
}
.container div:hover {
color: red;
}
由于选择器不够强大,最后一个类将不会覆盖第一个类。 因此,尽管最后一个类写在下面,但悬停时颜色仍保持灰色。
关于javascript - 更改页面元素后出现 window.print 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19464026/