Stylesheeteigenschaften onClick ändern

[Chriz]

Ahoi...

Ich suche gerade nach einem weg, um festgelegte Styles onClick zu ändern, ohne alle Elemente, die mit dem Style versehen sind, abzufragen.

Bspw:
.test1{font-family:arial;color:#ffffff;font-weight;normal}

Mehrere Objekte bekommen den Style nun zugewiesen und onClick würde ich gerne etwas wie

test1.style.color='#000000';

machen und sämtliche Objekte haben nun schwarzen Text.
Geht das(mein Beispiel klappt nicht), oder muss ich da eine komplexe Abfrage bauen?

Danke schonmal,
Chriz

[Gunther]

Hi Chriz,

Ich suche gerade nach einem weg, um festgelegte Styles onClick zu ändern, ohne alle Elemente, die mit dem Style versehen sind, abzufragen.

Bspw:
.test1{font-family:arial;color:#ffffff;font-weight;normal}

Mehrere Objekte bekommen den Style nun zugewiesen und onClick würde ich gerne etwas wie

test1.style.color='#000000';

machen und sämtliche Objekte haben nun schwarzen Text.
Geht das(mein Beispiel klappt nicht), oder muss ich da eine komplexe Abfrage bauen?

Wie soll das gehen, ohne die Styleeigenschaft jedes 'betroffenen' Elements einzeln zu ändern? Das ginge imho nur dann, wenn man Variablen in Stylesheets verwenden könnte (was nicht geht) und diese per JS ändern könnte.

Was du machen kannst ist, wenn du die möglichen Alternativen schon kennst, ist die komplette CSS Datei 'auszutauschen'.
Stichwort 'Styleswitcher' (siehe Google).

Ob du dafür eine serverseitige Variante mit PHP bspw. oder eine Lösung mit JS nimmst, bleibt dir überlassen.

Gruß Gunther

[Chriz]

Danke für die Info.

Dann werde ich wohl eher darauf verzichten. Da ich die Möglichkeit biete, den Background zu ändern, wäre eine farbliche Anpassung einzelner Elemente schön gewesen. Aber dann bleibe ich bei neutralen Farben für die Menüs :)

Thx,
Chriz

[wahsaga]

hi,

Da ich die Möglichkeit biete, den Background zu ändern, wäre eine farbliche Anpassung einzelner Elemente schön gewesen.

Dann ändere doch einfach die Klasse eines übergeordneten Elementes, und wende für die geschünschten CSS-Formatierungen u.a. den Nachfahrenselektor an.

gruß,
wahsaga

[Cybaer]

Hi,

.test1{font-family:arial;color:#ffffff;font-weight;normal}
test1.style.color='#000000';
Wie soll das gehen, ohne die Styleeigenschaft jedes 'betroffenen' Elements einzeln zu ändern? Das ginge imho nur dann, wenn man Variablen in Stylesheets verwenden könnte (was nicht geht) und diese per JS ändern könnte.

? Natürlich kann man mittels JS einzelne Elemente einer CSS-Regel bzw. die ganze CSS-Regel auf einmal ändern - vom Opera mal abgesehen.

Mit untenstehender Funktion wäre obiges Beispiel wie folgt zu lösen:

result=cssRule(".test","color","#000000");

  
/* 'CSS-Regeln lesen/aendern 270705' (c) by [e-mail]  
   ---------------------------------  
 Inhalt    : Kann eine komplette CSS-Regel oder eine einzelne Eigenschaft auslesen oder aendern  
 Aufruf    : cssRule(index,styleAttribute[,newValue])  
 Parameter : index (String: gewuenschter Selektor (case-insensitive!) oder  
                       "Adresse" der Regel in der Form "Nr. des Stylesheets/Nr.  
                       der Regel", jeweils beginnend bei 0, z.B. "0/0")  
             attribute (String, mit wahlweise folgendem Inhalt:  
                        1) gewuenschte Eigenschaft die bearbeitet werden soll,  
                           in der Syntax von CSS ("font-size") oder JavaScript  
                           ("fontSize");  
                        2) "rule" (oder leer), fuer die komplette Regel  
                        3) sonstige spezifische Anweisungen. Bei  
                         a) "object" wird das Style-Objekt selbst ermittelt,  
                            mit dem man dann weiterarbeiten kann;  
             value (String (optional): neuer Wert, ggf. auch leer, der  
                       geschrieben werden soll; wird der Parameter nicht  
                       uebergeben, so wird der aktuelle Wert ausgelesen)  
 Sprache   : JavaScript 1.1 (ungesichert), JavaScript 1.5 (gesichert)  
 Quelle    : http://Coding.binon.net/ ([e-mail])  
             Die kostenlose Nutzung der Quelltexte in eigenen Projekten ist  
             bei nicht-kommerziellen Projekten (und deren unentgeltlicher  
             Herstellung) bei Nennung der Quelle ausdruecklich gestattet.  
 InlineFunc: -  
 Konstante : -  
 Variable  : -  
 SystemVar : -  
 ExternVar : -  
 Rueckgabe : 1) false wenn Funktion nicht moeglich ist (Browser zu alt oder  
                zu bearbeitende Regel existiert nicht - beim Browser Konqueror  
                wird ggf. nur ein false zurueckgegeben, falls attribute leer  
                ist, da alte Versionen einen Bug bei der dann verwendeten  
                JavaScript-Eigenschaft cssText haben).  
             2) JavaScript-Objekt wenn attribute "object" ist.  
             3a) Wenn value nicht uebergeben wurde:  
                 aktuelle Regel wenn attribute "rule" oder leer ist oder den  
                 Stil der Eigenschaft, die in attribute definiert wurde.  
              b) Wenn value uebergeben wurde (auch leer):  
                 true, wenn value neu gesetzt werden konnte)  
 Anmerkung : 1. Vorsicht bei der Benutzung von @import! Wird @import benutzt,  
                koennen bei Direktaddressierung nur Styles *vor* dem ersten  
                @import browseruebergreifend identisch bearbeitet werden. Bei  
                Angabe eines Selektors werden zwar die Stylesheets (intern  
                wie extern) durchsucht, nicht jedoch die importierten Regeln!  
             2. Bei sehr großen und mehreren Stylesheets empfiehlt sich ggf.  
                die direkte Adressierung, um das Durchsuchen zu vermeiden. Bei  
                Angabe eines Selektors sollte der gesuchte Selektor moeglichst  
                weit hinten im Quelltext aufgefuehrt werden, da die Regeln von  
                hinten durchsucht werden (bei mehreren identischen Selektoren  
                ueberstimmen die Eigenschaften des letzten Selektors ggf.  
                identische Eigenschaften eines frueheren Selektors.  
             3. Wird eine Regel oder Eigenschaft geloescht, ist natuerlich zu  
                beachten, dass nunmehr Regeln oder Eigenschaften eines ggf.  
                im Quelltext vorstehenden identischen Selektors aktiv werden!  
 Beispiele : HTML  : <style>  
                       .aStil { font-size: 2em; font-weight: bold; }  
                     </style>  
                     <style>  
                       .bStil { color: red; background-color: blue; }  
                       #cStil { }  
                     </style>  
                     <span class="aStyle">Text A</span>  
                     <span class="bStyle">Text B</span>  
                     <span id="cStyle">Text C</span>  
             Script: alert(cssStyle("0/0"));  
             -> Alert: "font-size: 2em; font-weight: bold"  
             Script: alert(cssStyle(".aStil","font-size)); oder auch  
                     alert(cssStyle(".astil","fontSize)); oder auch  
                     alert(cssStyle(".aStil","object").fontSize);  
             -> Alert: "2em"  
             Script: cssStyle("0/0","","");  
             -> "Text A" erscheint im "Normalstil" (Stile der 1. Regel werden  
                geloescht was <style> .aStyle { } </style> entspricht)  
             Script: cssStyle("1/0","color","black");  
             -> die rote Schriftfarbe von "Text B" (1. Regel im 2. Sheet)  
                wird in schwarz geaendert  
             Script: cssStyle("#cStil","display","none");  
             -> "Text C" (ID ist "cStil") wird versteckt  
*/  
  
function cssRule(index,attrib,value) {  
 // Lokale Variable definieren  
 var s=0, r=0, i, result=false, obj=false, sheet, rule, complete, write, syntax;  
 // Existiert das benoetigte Objekt und gibt es ueberhaupt ein Stylesheet?  
 if(document.styleSheets && document.styleSheets.length) {  
  // Wurde eine direkte Adressierung der Regel ("x/y") uebergeben?  
  if(parseInt(index)!="NaN" && index.indexOf("/")>=0) {  
   // Adressierung aufteilen in Stylesheet-Nummer ...  
   sheet=parseInt(index.split("/")[0],10);  
   // ... und Regel-Nummer  
   rule=parseInt(index.split("/")[1],10);  
   // Fortfahren, wenn Stylesheet existiert  
   if(typeof(document.styleSheets[sheet])=="object") {  
    // Objekt nach W3C-DOM (falls Regel existiert)  
    if(document.styleSheets[sheet].cssRules && document.styleSheets[sheet].cssRules[rule]) {  
  
     // Nur Typ 1 (Style), nicht 3 (importedStyle)  
     if(document.styleSheets[sheet].cssRules[rule].type==1) {  
      obj=document.styleSheets[sheet].cssRules[rule].style;  
     }  
    // Objekt nach IE-DOM (falls Regel existiert)  
    } else if(document.styleSheets[sheet].rules && document.styleSheets[sheet].rules[rule]) {  
     obj=document.styleSheets[sheet].rules[rule].style;  
    }  
   }  
  } else {  
   // Uebergebenen Selektor in Kleinschrift umwandeln  
   index=index.toLowerCase();  
   // Alle Stylesheets und Regeln nach dem gewuenschten Selektor durchsuchen  
   for(s=document.styleSheets.length-1; s>=0; s-=1) {  
    // Stylesheet durchsuchen nach W3C-DOM  
    if(document.styleSheets[s].cssRules) {  
     for(r=document.styleSheets[s].cssRules.length-1; r>=0; r-=1) {  
      // Wenn Regulaere Style-Regel und passender Selektor:  
      if(document.styleSheets[s].cssRules[r].type==1 && document.styleSheets[s].cssRules[r].indexText.toLowerCase()==index) {  
       // Style-Objekt ermitteln und Schleifen abbrechen  
       obj=document.styleSheets[s].cssRules[r].style;  
       break;  
      }  
     }  
    // Stylesheet durchsuchen nach IE-DOM  
    } else if(document.styleSheets[s].rules) {  
     for(r=document.styleSheets[s].rules.length-1; r>=0; r-=1) {  
      // Wenn passender Selektor:  
      if(document.styleSheets[s].rules[r].indexText.toLowerCase()==index) {  
       // Style-Objekt ermitteln und Schleifen abbrechen  
       obj=document.styleSheets[s].rules[r].style;  
       break;  
      }  
     }  
    }  
    if(obj) break;  
   }  
  }  
 }  
  
 // Objekt konnte ermittelt werden?  
 if(obj) {  
  // Wenn nur das Objekt gewuenscht war, ...  
  if(attrib=="object") {  
   // ...dieses zurueckgeben ...  
   result=obj;  
   // ... sonst Hauptroutine starten  
  } else {  
   // Komplette Regel bearbeiten oder nur ein gewuenschtes Attribut daraus?  
   complete=(!attrib)?true:false;  
   // Gibt es einen neuen Wert (=schreiben) oder nicht (=lesen)?  
   write=(typeof(value)!="undefined")?true:false;  
   // Nur spezifische Eigenschaft bearbeiten?  
   if(!complete) {  
    // Vorher aber ggf. Syntax von CSS- auf Script-Schreibweise aendern:  
     // 1. Eigenschaft "float"  
     if(attrib=="float") { attrib="cssFloat"; }  
     // 2. Eigenschaften mit Bindestrich  
     if(attrib.indexOf("-")>=0) {  
      // CSS-Syntax am "-" auftrennen, ...  
      syntax=attrib.split("-");  
      // ... ersten Teil uebernehmen und ...  
      attrib=syntax[0];  
      // ... folgende Teile mit grossem Anfangsbuchstaben  
      for(i=1; i<syntax.length; i++) { attrib+=syntax[i].charAt(0).toUpperCase()+syntax[i].substring(1); }  
     }  
    // Gewuenschte Eigenschaft bearbeiten  
    if(write) {  
     // (schreiben)  
     obj[attrib]=value;  
     result=true;  
    } else {  
     // (auslesen)  
     result=obj[attrib];  
    }  
   // Konqueror-Bug abfangen  
   } else if(obj.cssText!=null) {  
    // Kompletten Text bearbeiten  
    if(write) {  
     // (schreiben)  
     obj.cssText=value;  
     result=true;  
    } else {  
     // (auslesen)  
     result=obj.cssText.toLowerCase();  
    }  
   }  
  }  
 }  
 return result;  
}  

Gruß, Cybaer

[Struppi]

Wie soll das gehen, ohne die Styleeigenschaft jedes 'betroffenen' Elements einzeln zu ändern? Das ginge imho nur dann, wenn man Variablen in Stylesheets verwenden könnte (was nicht geht) und diese per JS ändern könnte.

Naja, man kann die document.styleSheets eigenschaften ändern.
http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/stylesheets.asp
http://www.mozilla.org/docs/dom/domref/dom_style_ref.html

und dann entsprechend rules bzw. cssRules

Struppi.

[Struppi]

Mehrere Objekte bekommen den Style nun zugewiesen und onClick würde ich gerne etwas wie

test1.style.color='#000000';

machen und sämtliche Objekte haben nun schwarzen Text.
Geht das(mein Beispiel klappt nicht), oder muss ich da eine komplexe Abfrage bauen?

Es geht, aber es klappt nicht in allen Browsern und es gibt mindestetns zwei Möglichkeiten.
http://jstruebig.de/web/javascript/lib/css.html

Struppi.