Stylesheeteigenschaften onClick ändern
Chriz
- css
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
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
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
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
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 cybaer@binon.net
---------------------------------
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/ (cybaer@binon.net)
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
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.
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.