Medienspezifische CSS-Eigenschaften aus Javascript ändern

8

Ich habe eine CSS-Eigenschaft (Schriftart), die ich aus Javascript (einem Pulldown) ändern kann. Diese Schriftart sollte jedoch nur beim Drucken verwendet werden (@media print).

So kann das Javascript nicht nur den Wert der Schriftart ändern, da dies auch die Bildschirmdarstellung beeinflussen wird. Gibt es eine Möglichkeit, NUR die Druckversion der Schrifteigenschaft zu ändern?

Gibt es alternativ eine Möglichkeit, eine CSS-Eigenschaft als Referenz zu einer anderen Eigenschaft zu verwenden?

So könnte ich in der Print-CSS font: printfont und in der Bildschirm-CSS-Schriftart: 12 sagen. Und dann ändern Sie den Wert von printfont, und es würde nur die Schriftart beim Drucken ändern.

danke.

EDIT: Der Punkt ist, dass ich in der Lage sein muss, die Schriftgröße zu ändern, mit der das Dokument aus dem Pulldown gedruckt wird, aber ich möchte die Schriftgröße, die das Dokument angezeigt wird, nicht ändern.

    
Brian Postow 28.04.2009, 15:27
quelle

4 Antworten

10

Das ist ein interessantes Dilemma, das Sie dort haben. Von Kopf bis Fuß kann ich nur daran denken, der Kopfzeile, in der die Schriftgröße mit "! Wichtig" deklariert ist, ein neues Tag hinzuzufügen. Zum Beispiel in Ihrem Kopf Tags:

%Vor%

Dadurch wird sichergestellt, dass die neue Schriftgröße Vorrang hat.

Das folgende ist ein sehr schnelles Beispiel, wie Sie dies mit Javascript erreichen können

%Vor%

Stellen Sie sicher, dass Sie onchange="changeMediaStyle ()" als Attribut in Ihrem Dropdown-Menü haben. Als Haftungsausschluss in meinem Beispiel verrechne ich keine Dinge wie Speicherlecks, daher müssen Sie diese Art von Problemen selbst lösen.

Was Ihre alternative Frage betrifft, so gibt es meines Wissens keine Methode, um im Wesentlichen CSS-Variablen zu deklarieren / zu verwenden. Allerdings gibt es derzeit eine Empfehlung dafür: Ссылка

    
Jordan S. Jones 28.04.2009 15:40
quelle
2

scheint so zu sein, wie Sie tun möchten, ist myabe nur ändern oder fügen Sie eine Klasse zu dem Element mit JS

%Vor%     
nickmorss 28.04.2009 15:38
quelle
0

Sie können einfach JavaScript verwenden, um zwischen Klassen zu wechseln und das

zu verwenden %Vor%     
Steve Perks 28.04.2009 15:41
quelle
0

Während die klassenbasierten Lösungen vollständig funktionieren würden, könnten Sie auch Javascript verwenden, um der Seite dynamisch ein neues <link> -Tag hinzuzufügen. Zum Beispiel, wenn Sie:

stylesheet1.css:

%Vor%

stylesheet2.css:

%Vor%

Sie könnten dann jQuery verwenden, um etwas wie:

zu machen %Vor%

(Sie könnten es auch ohne jQuery machen, aber ich vergesse diese Syntax und bin zu faul, um nachzusehen; -)).

Wenn Sie jedoch nur kleine Beträge ändern, ist ein einzelnes Stylesheet + verschiedene Klassen wahrscheinlich der bessere Weg; Die neue <link> -Tag-Lösung lohnt sich nur, wenn Sie eine Reihe verschiedener Stiländerungen durchführen.

    
machineghost 28.04.2009 15:46
quelle

Tags und Links