使用Javascript更改顯示樣式（CSS）而不影響打印樣式

我有一個Web應用程序，它利用單獨的print stylesheet來控制頁面從打印機出來時的外觀。直到我最近對該網站做了一些Javascript增強功能之後，這一切才奏效。其中一個增強功能允許用戶凍結頁面標題和導航以及表格標題。這背後的Javascript做了一些CSS技巧來凍結屏幕上的元素。不幸的是，將position: fixed應用於我的標題（例如）會導致它在每個頁面上打印，而這不是預期的效果。我如何使用Javascript來調整客戶端的元素樣式而不影響打印樣式？使用Javascript更改顯示樣式（CSS）而不影響打印樣式

@media print { #foo { color: blue; } }    /* Print definition */ 
@media screen { #foo { color: green; } }    /* Display definition */ 
document.getElementById('foo').style.color = 'red'; /* Overrides both! */

來源

2011-06-13 Josh Stodola

注意：很多用Javascript改變的樣式甚至都沒有在CSS打印文件中設置。理想情況下，我將有一種方法來改變*只顯示*樣式在Javascript中。必須用'！important'手動覆蓋CSS打印文件中的所有JS調整並不是真正的解決方案。 – 2011-06-13 19:59:26

沒有好的解決方案！我結束了被利用onbeforeprint和onafterprint功能在IE（我在這裏的位置，我們只有IE用戶）「解凍」和「重新凍結」的元素做...

window.onbeforeprint = function() { 
    document.getElementById('foo').style.position = 'static'; 
} 

window.onload = window.onafterprint = function() { 
    var el = document.getElementById('foo'); 
    // Get element position and size 
    // Set left/top/width/height properties 
    // Set position to fixed 
    el.style.position = 'fixed'; 
}

來源

2011-06-15 18:44:58

[html5shiv]（http://code.google.com/p/html5shiv/）的功能與在舊版IE中支持打印HTML5元素類似。所以，這項技術是強大的。 – thirtydot 2011-06-21 00:32:18

將!important添加到您的打印規則。

來源

2011-06-13 19:52:08

咦？這不會做任何事情。我甚至沒有在我的CSS規則中設置「位置」（或者我用JavaScript調整的其他任何東西）。 – 2011-06-13 19:54:06

我想這意味着我將不得不重寫每個我用Javascript調整的樣式？我可以看到那裏的目標！所以明年當我必須改變Javascript時，我會忘記更改CSS覆蓋...... Ug-leeeee – 2011-06-13 19:55:38

順便說一句，我試着添加這個並設置'position：static！important'來避免打印時的固定位置，現在它每次嘗試打印或預覽時都會使IE崩潰！ – 2011-06-13 20:12:48

你可以試試這個 @media print {#foo {color：blue！important; }}

問題是，javascript。style.something，編輯元素的內聯css，因此它會覆蓋正常的css類/ id規則。

或者你也可以和班級一起工作。 document.getElementById（'foo'）。className ='redText';

並將.redText保存在您的常規css文件中（而不是打印文件），比填寫！print重要規則要好得多。

來源

2011-06-13 19:56:06 Pantelis

感謝您提供更完整的答案。我很傷心有沒有更清潔的方式，像'document.getElementById（'foo'）。displayStyle.color ='green';' – 2011-06-13 19:57:44

不幸的是，沒有，沒有。但是使用類實際上很乾淨。因爲當你以後回來做一些維護時，你會發現CSS中的所有樣式規則（它們在語義上屬於它們），而不必編輯你的CSS和JS文件。 – Pantelis 2011-06-13 19:59:44

不是一個真正的選擇。如果您考慮凍結頁面上的元素，您必須修復位置，然後在父代中設置其精確的座標。如果這些元素的內容因頁面而異，則無法預測它將佔用的大小（如果您使用的是任何類型的流佈局），因此必須在Javascript中動態進行更改。我卡住了。 – 2011-06-13 20:03:11

而不是在你的元素更改屬性與此的：

document.getElementById('foo').style.color = 'red';

追加新<style>元素，例如：

$('<style>@media screen { #foo { color: green; } }</style>').appendTo('head');

這將是更好的所有所需的更改連接成一個<style>元素，如果可能的話。

來源

2011-06-13 20:20:11 thirtydot

好主意。我已經在IE6，IE9，Chrome和FF5上測試過了。 – 2011-08-05 01:37:22

正確解決方案是不捅到風格節點，但不是配合你的屏幕特定風格的調整，以CSS類僅影響的事情你的屏幕再現：

@media screen { .freeze { position: fixed; } } /* Display-only definition */

document.getElementById('foo').className = "freeze";

作爲獎勵，這也使得只需一行js即可輕鬆更改大量樣式，這使得事情更快，更容易維護。

來源

2013-09-11 22:48:05 ecmanaut

使用Javascript更改顯示樣式（CSS）而不影響打印樣式

回答

相關問題