Zugriff auf CSS

[flashnfantasy]

Kann man auf die Klassen, die man bei den CSS definiert hat, direkt zugreifen.

Was ich machen will:
An verschiedenen Stellen der Website wird ein Hilfeknopf angezeigt wird.
Nun will ich einfach die Klasse ansprechen, und die Hilfe mit display:none wegblenden.
Die Alternative wäre, rekursiv über alle Knoten gehen, und diese Klasse abfragen.

[molily]

Hallo,

Kann man auf die Klassen, die man bei den CSS definiert hat, direkt zugreifen.

Möglichkeit 1:
Die Klasse wie du vorhast über DOM CSS (document.styleSheets) manipulieren. Dazu kannst du Struppis Bibliothek verwenden. Funktioniert nur in neueren MSIEs und Gecko-Browsern zuverlässig.

Die Alternative wäre, rekursiv über alle Knoten gehen, und diese Klasse abfragen.

Möglichkeit 2:
Über getElementsByClassName und DOM CSS (.style.display) bei allen Elementen mit der fraglichen Klasse die display-Eigenschaft ändern.

An verschiedenen Stellen der Website wird ein Hilfeknopf angezeigt wird.
Nun will ich einfach die Klasse ansprechen, und die Hilfe mit display:none wegblenden.

Möglichkeit 3:
Alle Hilfeknöpfe bekommen eine Klasse. Ein Element, das darüberliegt und alle unmittelbar oder mittelbar enthält (z.B. body), bekommt ebenfalls eine Klasse. Es werden folgende CSS-Regeln mit Nachfahrenselektoren definiert:
.hilfeknoepfe-eingeblendet .hilfeknopf {display:none;}
.hilfeknoepfe-ausgeblendet .hilfeknopf {display:inline; /* oder block usw. */}
Wenn die Hilfeknöpfe versteckt werden sollen, bekommt body über DOM HTML (.className) die Klasse hilfeknoepfe-ausgeblendet. Dann sollten alle Hilfeknöpfe verschwinden. Zum Einblenden wird wieder hilfeknoepfe-eingeblendet gesetzt.

Mathias

[flashnfantasy]

Hi Mathias,

das hat mir jetzt enorm weitergeholfen,
Möglichkeit 3 fasziniert mich ehrlich gesagt am meisten, weil sie ohne Abfrageschleife auskommt, leider sind die Hilfe-Buttons nicht das Einzige, was ich auf diese Weise manipulieren will. Und da ist dann die Lösung nicht so gut.

Möglichkeit 1 mit document.styleSheets scheint mir dann doch eine zu singuläre Lösung sein, abgesehen davon geht man da auch über eine Schleife.

Aber Lösung 2 - genau das was ich gesucht habe.

DANKE,

Mathias

[Henryk Plötz]

Moin,

Möglichkeit 3 fasziniert mich ehrlich gesagt am meisten, weil sie ohne Abfrageschleife auskommt, leider sind die Hilfe-Buttons nicht das Einzige, was ich auf diese Weise manipulieren will. Und da ist dann die Lösung nicht so gut.

Du kannst natürlich auch mehrere Klassen zuweisen:

  
/* Die Zusammenfassung über , mache ich nur weil ich zu faul zum Tippen bin :) */  
.hilfeknoepfe-eingeblendet .hilfeknopf, .bla-eingeblendet .bla {display:inline;}  
.hilfeknoepfe-ausgeblendet .hilfeknopf, .bla-ausgeblendet .bla {display:none;}  

und dann ...className = "bla-eingeblendet hilfeknoepfe-ausgeblendet" oder "bla-eingeblendet hilfeknoepfe-eingeblendet", "bla-ausgeblendet hilfeknoepfe-ausgeblendet", etc.