print.css per Javascript bearbeiten

[ted]

Moin moin!

Per print.css habe ich eine individuelle Druckansicht gestaltet. Wenn ein Benutzer nun vor dem Drucken auf einen Link auf der Website klickt, möchte ich einen Wert in der print.css verändern:

.header{display:none; soll zu .header{display:block; werden. wie spreche ich aber nun die print.css an?

gruß
ted

[ChrisB]

Hi,

Per print.css habe ich eine individuelle Druckansicht gestaltet. Wenn ein Benutzer nun vor dem Drucken auf einen Link auf der Website klickt, möchte ich einen Wert in der print.css verändern:

.header{display:none; soll zu .header{display:block; werden. wie spreche ich aber nun die print.css an?

Du kannst zwar gezielt auf einzelne Stylesheets zugreifen und darin Regeln verändern - aber browserübergreifend ist das nicht ganz trivial.

Ich bevorzuge auch in solchen Fällen die "einfache" Methode: Das dynamische Setzen einer Klasse für ein Vorfahrenelement, bspw. body - und dann im Print-Stylesheet den Nachfahrenselektor nutzen.

MfG ChrisB

[molily]

.header{display:none; soll zu .header{display:block; werden. wie spreche ich aber nun die print.css an?

Über das CSS-DOM kannst du dem eingebundenen Stylesheet dynamisch eine Regel hinzufügen, die eine vorherige überschreibt.

<link rel="stylesheet" id="printstylesheet" href="...">

Das Script dazu würde in etwa so aussehen (ungetestet):

// Link-Element anhand der ID ansprechen  
var link = document.getElementById("printstylesheet");  
// Das entsprechende Stylesheet-Objekt ansprechen (standardkonform und IE-proprietär)  
var ss = link.sheet || link.styleSheet;  
// Regel-Liste ansprechen (standardkonform und IE-proprietär)  
var rules = ss.rules || ss.cssRules;  
// Regel ans Ende der Liste einfügen (standardkonform und IE-proprietär)  
if (ss.insertRule) {  
  ss.insertRule('.header { display: block; }', rules.length);  
} else if (ss.addRule) {  
  ss.addRule('.header', 'display: block');  
}

Mathias

[Cybaer]

Hi,

.header{display:none; soll zu .header{display:block; werden. wie spreche ich aber nun die print.css an?

1. Wenn es so simpel ist, kann Du einfach die alternative Regel vorbereiten, und dann die Klasse des Elements wechseln.

2. Regeln durch neue überschreiben (s. molily). Dabei kann man allderdings noch beachten, daß es auf manchen Browsern nicht standardgemäß klappt (s. Coding: CSS-Stylesheets & -Regeln ergänzen).

3. CSS selbst ändern. Das ist u.a. dann sinnvoll, wenn beliebige Werte (z.B. User-Einstellungen) angewandt werden sollen.

Gruß, Cybaer

[Cybaer]

Nachtrag:

3. CSS selbst ändern. Das ist u.a. dann sinnvoll, wenn beliebige Werte (z.B. User-Einstellungen) angewandt werden sollen.

S. Coding: CSS-Regeln (& Stylesheets) auslesen & ändern :)

Gruß, Cybaer