Mit Javascript Attribut einer Style-Klasse ändern

[Sven]

Hallo,

folgendes Problem:

Ich habe eine Style-Klasse die wie folgt aussieht:

.text {
        font:       11px Verdana;
        display:    block;
    }

Jetzt habe ich folgende JavaScript-Funktion, die zu Beginn beim Laden der Webseite aufgerufen wird:

function closeAllNews() {
        text.style.display = 'none';
    }

Diese Funktion soll alle div-Elemente, die im div-Tag class="text" stehen haben, nicht anzeigen. Das funktioniert so aber nicht, wie ich mir das gedacht habe. Hat wer eine Lösung wie das geht?

Danke im Voraus.

Gruß
Sven.

[Tobias Unger]

Hi!

Diese Funktion soll alle div-Elemente, die im div-Tag class="text" stehen haben, nicht anzeigen. Das funktioniert so aber nicht, wie ich mir das gedacht habe. Hat wer eine Lösung wie das geht?

Meineswissens müsste es wie folgt funktionieren:
document.getElementById('text').style.display = 'none';

Allerdings müsstest du statt "class" "id" schreiben.

Kennst du schon die Javascript-Document-Seite von Selfhtml?

Grüße aus Nürnberg,
Tobias

[Gunnar Bittersmann]

Hello out there!

Diese Funktion soll alle div-Elemente, die im div-Tag class="text" stehen haben, nicht anzeigen.

document.getElementById('text').style.display = 'none';
Allerdings müsstest du statt "class" "id" schreiben.

Es geht um ALLE div-Elemente einer Klasse, nicht nur um ein bestimmtes.

See ya up the road,
Gunnar

[Sven]

Danke für die Antworten.

Es sollen alle div-Elemente geändert werden. Dazu braucht man wohl wirklich CSSRules. Schade das es anders nicht geht. Für alle die es interessiert, hier ein Link: http://www.quirksmode.org/dom/changess.html

Sollte es doch andere Lösungen geben, bitte her damit...

[Cheatah]

Hi,

Es sollen alle div-Elemente geändert werden. Dazu braucht man wohl wirklich CSSRules. Schade das es anders nicht geht.

ist das wirklich so schade? Nehmen wir mal den nächsten Fall: Es soll die background-Eigenschaft der Regel

html[xmlns] > head + body div#navigation ul *:not(li) > li.active {
    font-weight: bold;
}

verändert werden. Möchtest Du dazu lieber eine Variable namens "htmlxmlnsheadbodydivnavigationulnotliliactive" im globalen Scope haben?

Und um Einwände zu vermeiden: Obiger Selektor ist durchaus praxisnah.

Cheatah

[Sven]

Okay.

Klappt aber leider nicht ganz. Habe jetzt folgenden Code
--------------
function closeAllNews() {
 if (!document.styleSheets) {
  return;
 }

var theRules = new Array();

if (document.styleSheets[0].cssRules) {
  alert("1");
  theRules = document.styleSheets[1].cssRules;
 }
 else if (document.styleSheets[1].rules) {
  alert("2");
  theRules = document.styleSheets[1].rules;
 }
 else {
  alert("3");
  return;
 }

alert("ja");
 theRules[theRules.length-1].style.display = 'none';
}
---------------------

alert 1 wird ausgegeben, meine 4 Test-Style-Klassen werden erkannt (cssRules hat 4 Felder --> .length). Doch das alert("ja") am Ende wird nie ausgegeben und somit wird natürlich auch nicht das display = none gesetzt. Woran kann das liegen??

[Sven]

Dummer Fehler, habs doch geschafft. Hier der Code:
---------------
function closeAllNews() {
 if (!document.styleSheets) {
  return;
 }

var theRules = new Array();

if (document.styleSheets[0].cssRules) {
  alert("1");
  theRules = document.styleSheets[0].cssRules;
 }
 else if (document.styleSheets[0].rules) {
  alert("2");
  theRules = document.styleSheets[0].rules;
 }
 else {
  alert("3");
  return;
 }

alert("ja");
 theRules[theRules.length-1].style.display = 'none';
}

DANKE AN EUCH ALLE !!!

[Gunnar Bittersmann]

Hello out there!

theRules[theRules.length-1].style.display = 'none';

Ich würd mich aber nicht drauf verlassen, dass die Regel an einer bestimmten Stelle im Stylesheet steht. Was, wenn du später eine Regel hinzufügst? Denkst du dann daran, dein Script zu ändern?

Besser die Regeln nach dem Selektor absuchen:

for (var i = 0; i < theRules.length; i++)  
  if (theRules[i].selectorText.toLowerCase() == ".text") {  
    theRules[i].style.display = 'none';  
    i = theRules.length;  
  }

[W3C DOM Compatibility - CSS]

See ya up the road,
Gunnar

[Cybaer]

Hi,

Was, wenn du später eine Regel hinzufügst? Denkst du dann daran, dein Script zu ändern?

Ist gar nicht notwendig. Die Browser sorgen schon ganz alleine dafür, daß die Regel ggf. *nicht* an der gleichen Stelle steht. :-( Das geht sogar innerhalb der Browserfamilie ganz schnell (Mozilla <1.75 und >=1.75)

Eine direkte Adressierung im Script ist oft browserübergreifend unmöglich, selbst wenn man es wollte ...

Besser die Regeln nach dem Selektor absuchen:

Allerdings macht das ebenfalls Probleme.

if (theRules[i].selectorText.toLowerCase() == ".text") {

Der Safari wird das leider nicht finden. Er sieht stattdessen: '.text [CLASS~="text"]'! :-/

Gruß, Cybaer

[MudGuard]

Hi,

if (theRules[i].selectorText.toLowerCase() == ".text") {

Der Safari wird das leider nicht finden. Er sieht stattdessen: '.text [CLASS~="text"]'! :-/

Ist der wirklich so kaputt, daß der da einen Selector mit vollkommen anderer Bedeutung draus macht?

cu,
Andreas

[Cybaer]

Hi,

Der Safari wird das leider nicht finden. Er sieht stattdessen: '.text [CLASS~="text"]'! :-/
Ist der wirklich so kaputt, daß der da einen Selector mit vollkommen anderer Bedeutung draus macht?

Er macht es. Aber ist der Selektor denn von vollkommen anderer Bedeutung? IIRC bedeutet dieser Attributs-Selektor doch: Elemente mit dem Attribut CLASS und dem nicht exklusiven Wert "text". Also genau das gleiche!?

Gruß, Cybaer

[MudGuard]

Hi,

Der Safari wird das leider nicht finden. Er sieht stattdessen: '.text [CLASS~="text"]'! :-/
Ist der wirklich so kaputt, daß der da einen Selector mit vollkommen anderer Bedeutung draus macht?

Er macht es. Aber ist der Selektor denn von vollkommen anderer Bedeutung? IIRC bedeutet dieser Attributs-Selektor doch: Elemente mit dem Attribut CLASS und dem nicht exklusiven Wert "text". Also genau das gleiche!?

Nö, das wäre
.text[CLASS~="text"] - was doppelt gemoppelt ist.
.text [CLASS~="text"] dagegen bedeutet: Elemente, die im class-Attribut einen (von evtl. mehreren Whitespace-separierten) Eintrag text haben, die ein Vorfahrenelement mit class text haben.

cu,
Andreas

[Cybaer]

Hi,

.text[CLASS~="text"] - was doppelt gemoppelt ist.
.text [CLASS~="text"] dagegen bedeutet: Elemente, die im class-Attribut einen (von evtl. mehreren Whitespace-separierten) Eintrag text haben, die ein Vorfahrenelement mit class text haben.

LOL - natürlich ersteres. Denk dir in meinem Post den Whitespace einfach weg ... ;)

Gruß, Cybaer

[MudGuard]

Hi,

.text[CLASS~="text"] - was doppelt gemoppelt ist.
.text [CLASS~="text"] dagegen bedeutet: Elemente, die im class-Attribut einen (von evtl. mehreren Whitespace-separierten) Eintrag text haben, die ein Vorfahrenelement mit class text haben.

LOL - natürlich ersteres. Denk dir in meinem Post den Whitespace einfach weg ... ;)

Ach so, ist der Safari also doch gar nicht so krank ...

cu,
Andreas

[Cybaer]

Hi,

Ach so, ist der Safari also doch gar nicht so krank ...

Na ja, er ist "erfinderisch". ;-> Oder findest Du es gesund, wenn ein Browser eigenmächtig deinen Code verändert?

Und BTW: "So krank" ist er schon. Er verhunzt einen Gruppen-Selektor - zur Unkenntlichkeit.

Gruß, Cybaer

[MudGuard]

Hi,

Und BTW: "So krank" ist er schon. Er verhunzt einen Gruppen-Selektor - zur Unkenntlichkeit.

Wieso unkenntlich? Der "verhunzte" Selektor selektiert dieselben Elemente.

cu,
Andreas

[Cybaer]

Hi,

Wieso unkenntlich? Der "verhunzte" Selektor selektiert dieselben Elemente.

"Unkenntlich" != "Unfunktional"

Kennst Du denn eine Möglichkeit, wie ich beim Safari erkennen kann, für welche einzelnen Selektoren ein Gruppenselektor gilt?

Gunnars Beispiel zugrunde gelegt: ".text" wird gesucht, aber das Finden der Regel ist im Safari (anders als den anderen Browsern und jenseits des Standards) nicht möglich, wenn der Selektor in einer Gruppe steckt und nicht dessen 1. Selektor ist. Hmm, mir scheint, da ist die Tarnvorrichtung der Romulaner kaum weniger effektiv ... ;->

Gruß, Cybaer

[Cybaer]

Hi,

Sollte es doch andere Lösungen geben, bitte her damit...

Browserübegreifend: Coding: CSS-Regeln (& Stylesheets) auslesen & ändern

Gruß, Cybaer

PS: Gibt übrigens 'ne neue Version. cssRule() konnte bisher ja noch zusätzlich folgende Daten liefern:

• sheetobject: das StyleSheet-Objekt, dem die Regel angehört.
• styleobject: das Style-Objekt der Regel

Neu inzugekommen sind:

• sheetindex: Index-Nummer des gefundenen Stylesheets
• rulepointer: Pointer auf die gefundene Regel
• ruleobject: das Objekt der gefundenen Regel selbst
• rulecollection: die Collection aller Regeln des Stylesheets, dem die gefundene Regel angehört
• ownerobject: das Objekt des HTML-Elements des Stylesheets
• ownermarkup: der HTML-Quellcode des Stil-Elements

PPS: Und ein Workaround für die eigenwillige CSS-Veränderung des Safaris (er fügt eigenmächtig bei z.B. einem Klassen-Selektor einen Attribut-Selektoren für CLASS hinzu) ist mittlerweile auch eingebaut.

[Gunnar Bittersmann]

Hello out there!

'CSSRules' ist dein Suchbegriff.

See ya up the road,
Gunnar