Question

我遇到javascript提供的打印功能问题：它不会打印当前页面。

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

现在，问题是：为用户提供了一个打印按钮。这不是21世纪，而是一项要求。由于print.css，打印输出看起来很好。但是有一个问题：div容器只出现在未加工的形状中。 无论用户的输入是什么，div容器都以其初始状态打印（意思是：灰色背景）。

使用jquery-function addclass（）或removeclass（）更改div-containers。在屏幕上，一切正常。但是在处理完用户输入后查看源代码仍会显示未更改的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规则不适用。（也许有些!important或者只是覆盖不够强*）

* 覆盖不够强大的示例：

的CSS：

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

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