प्रिंट स्टाइल को प्रभावित किए बिना प्रदर्शन शैलियों (सीएसएस) को बदलने के लिए जावास्क्रिप्ट का उपयोग करें

Question

मेरे पास एक वेब एप्लिकेशन है जो प्रिंटर से बाहर आने पर पृष्ठ को कैसा दिखता है, यह नियंत्रित करने के लिए एक अलग print stylesheet का उपयोग करता है। यह आश्चर्यजनक रूप से काम कर रहा था जब तक कि मैंने हाल ही में साइट पर कुछ जावास्क्रिप्ट एन्हांसमेंट नहीं किए। इन एन्हांसमेंट्स में से एक उपयोगकर्ता को पेज हेडर और नेविगेशन, साथ ही टेबल हेडर को फ्रीज करने की अनुमति देता है। इसके पीछे जावास्क्रिप्ट स्क्रीन पर तत्वों को फ्रीज करने के लिए कुछ सीएसएस चालबाजी करता है। दुर्भाग्यवश, मेरे शीर्षलेख पर position: fixed लागू करना (उदाहरण के लिए) इसे प्रत्येक पृष्ठ पर प्रिंट करने का कारण बनता है, और यह वांछित प्रभाव नहीं है। प्रिंट शैली को प्रभावित किए बिना क्लाइंट-साइड पर तत्व शैलियों को ट्विक करने के लिए मैं जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं?

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

Answer 1

कोई अच्छा समाधान नहीं! क्या मैं कर (मैं यहाँ स्थिति में हूँ कि हम केवल IE उपयोगकर्ताओं है) IE में onbeforeprint और onafterprint कार्यों का उपयोग कर रहा है "नरम कर देना" और "refreeze" तत्वों को समाप्त ...

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'; 
} 

Answer 2

अपने प्रिंट नियमों में !important जोड़ें।

Answer 3

आप इसे @media प्रिंट {#foo {color: blue! महत्वपूर्ण; }}

समस्या यह है कि जावास्क्रिप्ट। स्टाइल.something, तत्व के इनलाइन सीएसएस को संपादित करता है, इसलिए यह सामान्य सीएसएस वर्ग/आईडी नियमों को ओवरराइड करेगा।

या आप कक्षाओं के साथ काम कर सकते हैं। document.getElementById ('foo')। ClassName = 'redText';

और अपनी नियमित सीएसएस फ़ाइल (प्रिंट एक नहीं) में .redText रखें, अपने प्रिंट सीएसएस को भरने से कहीं ज्यादा बेहतर! महत्वपूर्ण नियम।

Answer 4

इसके बजाय इस के साथ अपने तत्वों पर गुणों को बदलने के

:

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

एक नया <style> तत्व, उदाहरण के लिए संलग्न:

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

बेहतर होगा कि एक <style> में अपने सभी आवश्यक परिवर्तन को श्रेणीबद्ध करने के लिए यदि संभव हो तो तत्व।

Answer 5

उचित

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

+

0123: समाधान नोड्स पर शैलियों प्रहार करने के लिए नहीं है, लेकिन बजाय सीएसएस वर्गों के लिए अपनी स्क्रीन विशिष्ट शैली में तोड़ मरोड़ टाई है कि केवल बातों में से अपनी स्क्रीन गायन को प्रभावित है

बोनस के रूप में, यह जेएस की केवल एक पंक्ति के साथ कई शैलियों को बदलना आसान बनाता है, जो चीजों को तेज़ी से और बनाए रखने में आसान बनाता है।