Gibt es eine Möglichkeit, Medien Druck CSS zu einer normalen Ansicht zu aktivieren?

Question

Ich habe eine Website mit einer Reihe von Druckmedienabfragen entwickelt, um die Seiten beim Drucken der Seite auszurichten. Wenn Sie im Webbrowser in den Druckmodus wechseln, funktionieren die Abfragen sehr gut. aber ich möchte diese @media print Abfragen auf einer regulären Webseite anwenden/entfernen, ohne in den Druckmodus gehen zu müssen (durch einen Klick auf eine Schaltfläche) gibt es eine Möglichkeit, dies zu erreichen?

Answer 1

Das erste, was in den Sinn kommt, ist Gebrauchsklassen. Einfaches Beispiel, um Ihnen die allgemeine Idee zu geben. Wenn Sie einen Knopf haben, der die emulateprint Klasse auf dem Körper schaltet, könnten Sie zB benutzen. Diese CSS:

body { 
    color: black; 
} 
body.emulateprint { 
    /* put same styles as @media print in here */ 
    color: red; 
} 

@media print { 
    body { 
    color:red; 
    } 
} 

Answer 2

zu yezzz Antwort hinzuzufügen: Wenn Sie den Druck CSS in HTML wie verknüpft haben

<link rel="stylesheet" media="print" href="..."> 

Sie können die media Attribute entfernen diese Stile überall, entweder auf dem Server zu ermöglichen, oder mit Javascript:

document.querySelector('[media="print"]').removeAttribute('media'); 

Beachten Sie, dass dies nicht funktioniert, wenn die Aussagen in der Druckformatvorlage in einer @media print {} Regel gewickelt.