Zum ursprünglichen Style wechseln

[Manfred]

Hallo,

ich lasse per Javascript den CSS-Style eines divs ändern.
Ist es möglich bei einer bestimmten Aktion zurück zum ursprünglichen Style zu wechseln?

Gruß, Manfred

[Struppi]

ich lasse per Javascript den CSS-Style eines divs ändern.
Ist es möglich bei einer bestimmten Aktion zurück zum ursprünglichen Style zu wechseln?

Ja, in der Regel reicht es der Eigenschaft einfach einen Leerstring zu zuzweisen.

Struppi.

[Jörg Peschke]

Hallo,

ich lasse per Javascript den CSS-Style eines divs ändern.
Ist es möglich bei einer bestimmten Aktion zurück zum ursprünglichen Style zu wechseln?

Du könntest die Eigenschaften des ursprünglichen Styles "backuppen" und sie dann wieder in das Attribut zurückschreiben:

var backupStyle = new Object();
var element = document.getElementById("someElement");
if (element) {
   for (var property in element.style) {
      backupStyle[property] = element.style[property];
   }
}
 ...und das ganze dann wieder rückwärts, wenn Du den alten Style wieder herstellen willst.

Nachteil ist hierbei aber: Das geht nur für Style-Informationen, die direkt inline im Style des Elementes definiert werden, CSS-Informationen kann man so nicht wieder herstellen.

-> Besser: Verändere den Style des Elementes nicht direkt.

• Gib dem Element in seiner ursprünglichen Form eine CSS-Klasse
• Definiere für die veränderte Form (also in die Du mit JavaScript schaltest) eine neue CSS-Klasse

-> Dann schalte zwischen beiden CSS-Klassen hin und her. Das sollte zuverlässig funktionieren & ist auch wartbarer, weil Layout und Implementierung dann sauber voneinander getrennt sind.

Viele Grüße,
Jörg

[Struppi]

-> Besser: Verändere den Style des Elementes nicht direkt.

Was spricht gegen den Leerstring?

Struppi.

[Jörg Peschke]

Hallo,

Was spricht gegen den Leerstring?

Die Tatsache, dass ich diese Möglichkeit nicht kannte *verlegen-guck*

Trotzdem bleibe ich dabei, der sauberste (wenn auch nicht immer praktikable) Weg ist die Definition von eigenen Klassen für verschiedene Zustände.

Viele Grüße,
Jörg

[Cybaer]

Hi,

Was spricht gegen den Leerstring?
Die Tatsache, dass ich diese Möglichkeit nicht kannte *verlegen-guck*

Trotzdem bleibe ich dabei, der sauberste (wenn auch nicht immer praktikable) Weg ist die Definition von eigenen Klassen für verschiedene Zustände.

Hmm, schonmal dran gedacht, daß Du vielleicht noch weitere Möglichkeiten nur nicht kennst? ;-)

Gruß, Cybaer

[Cybaer]

Hi,

Nachteil ist hierbei aber: Das geht nur für Style-Informationen, die direkt inline im Style des Elementes definiert werden,

Man muß aber auch nicht style verwenden. currentStyle bzw. getComputedStyle() lesen den aktuellen Wert aus, unabhängig wo der definiert wurde, und lesenden bzw. schreibenden Zugriff auf interne wie externe Stylesheets hat man ja via der styleSheets-Collection ...

ist auch wartbarer, weil Layout und Implementierung dann sauber voneinander getrennt sind.

Das ist kein Grund für einen Klassenwechsel, denn auch sonst kann man "Layout und Implementierung" getrennt halten. Relevant ist nur, was die Aufgabe am Besten lösen kann ...

Gruß, Cybaer

[Jörg Peschke]

Hallo,

Man muß aber auch nicht style verwenden. currentStyle bzw. getComputedStyle() lesen den aktuellen Wert aus, unabhängig wo der definiert wurde, und lesenden bzw. schreibenden Zugriff auf interne wie externe Stylesheets hat man ja via der styleSheets-Collection ...

Wie Browserübergreifend ist das denn? Dachte immer es gäbe da so Kandidaten die das nicht können (Mac IE z.b.), mag mich aber täuschen.

Das ist kein Grund für einen Klassenwechsel, denn auch sonst kann man "Layout und Implementierung" getrennt halten.

Das ehe ich anders:
Spätestens wenns barrierefrei werden soll oder du aus anderen Gründenverschiedene CSS für verschiedene Browser benutzen willst/musst, ist das direkte Austauschen des Style-Attributes suboptimal.
(Weil selbst etwas banalses wie "ausblenden" dann verschiedenes bedeuten kann, z.b. "display:none" vs. "visibility:hidden")

Ich gebe zu, ich mach auch nicht für jedes "display:none" eine eigene Klasse, aber der sauberere Weg ist es eigentlich.

Viele Grüße,
Jörg

[ChrisB]

Hi,

Wie Browserübergreifend ist das denn? Dachte immer es gäbe da so Kandidaten die das nicht können (Mac IE z.b.), mag mich aber täuschen.

Und jetzt wenden wir uns wieder den Browsern zu, deren Marktanteil ohne Mikroskop messbar ist ...

MfG ChrisB

[Cybaer]

Hi,

Dachte immer es gäbe da so Kandidaten die das nicht können (Mac IE z.b.), mag mich aber täuschen.

Der unterstützt currentStyle.

Spätestens wenns barrierefrei werden soll oder du aus anderen Gründenverschiedene CSS für verschiedene Browser benutzen willst/musst, ist das direkte Austauschen des Style-Attributes suboptimal.

? Ich habe *nicht* geschrieben, daß irgendeine Methode optimal, suboptimal oder sonstwas wäre. Ich habe geschrieben, daß es versch. Wege gibt, das Ziel zu erreichen (wie meistens in JS), und habe diese aufgeführt.

Und ich schrieb, daß, anders als von dir behauptet, der Wechsel des Klassennamens nicht zwingend für Trennung von "Layout und Implementation" notwendig ist.

Das was ich ausgesagt habe, und das was Du verstanden hast, sind zwei grundverschiedene Dinge.

Ich gebe zu, ich mach auch nicht für jedes "display:none" eine eigene Klasse, aber der sauberere Weg ist es eigentlich.

Du kannst auch jederzeit das Stylesheet selbst ändern (also z.B. ein display:none nur für ein bestimmtes Medium oder einen bestimmtes Stylesheet (z.B. eines, das nur für einen bestimmten Browser gilt) ändern. Du kannst auch jederzeit vorgefertigte Musterstyles auslesen, und damit das Stylesheet ändern oder mit style setzen (dann hast Du sogar Trennung von "Layout und Implementation" bei gleichzeitiger Verwendung von style). Wenn man das Stylesheet selbst ändert, kann man das, anders als bei vorgefertigten Klassenregeln, sogar bei berechneten/flexiblen Werten nur für ein Medium machen. Es gibt, wie gesagt, mehrere Wege, und nicht nur einen. Und einer davon (also der von dir genannte) ist offensichtlich nicht der Weisheit letzter Schluß für alle Anwendungsfälle ...

Gruß, Cybaer

[Manfred]

Vielen Dank euch beiden.
Ich werde alles mal austesten.