1

我在使用 javascript 提供的打印功能时遇到了问题：它不打印当前页面。

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

现在，问题是：为用户提供了一个打印按钮。这不是 21 世纪，而是一种要求。多亏了 print.css，打印输出看起来相当不错。但是有一个问题： div 容器只以未处理的形状出现。无论用户的输入是什么，div-containers 都以初始状态打印（意思是：灰色背景）。

使用 jquery 函数 addclass() 或 removeclass() 更改 div 容器。在屏幕上，一切正常。但是在处理完用户的输入后查看源代码仍然会发现一个未更改的 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');

再次：在屏幕上一切正常。只是打印出来的乱七八糟...

4

1 回答 1

0

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

您的代码没有任何问题。恐怕它只是 CSS 规则不适用。（也许有些!important或只是覆盖不够强*）

*覆盖不够强的例子：

CSS：

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

由于选择器不够强，最后一个类不会覆盖第一个类。所以颜色在悬停时保持灰色，尽管最后一课写在下面。

于 2013-10-19T08:37:50.847 回答