javascript が提供する印刷機能に問題があります。現在のページが印刷されません。
最初から: ページの目的は、ユーザーからの入力を受け取り、それを処理し、結果を表示することです。実際、これはいくつかの入力フィールドを持つ単純なフォームです。jquery の助けを借りて、ユーザーからの入力が解釈され、結果が表示されます。入力に問題がなければ、div コンテナの緑色の背景にプラス記号が表示されます。そうでない場合は、赤い背景にマイナス記号が表示されます。
ここで、問題: ユーザーに印刷ボタンが表示されます。それは 21 世紀ではなく、要件です。print.css のおかげで、印刷物はきれいに見えます。ただし、問題が 1 つあります。div コンテナーは未処理の形状でしか表示されません。ユーザーの入力が何であれ、div コンテナーは初期状態(つまり、灰色の背景) で出力されます。
div コンテナーは、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');
繰り返しますが、画面上ではすべて正常に動作します。ただ印刷物がぐちゃぐちゃ…。