nicht angemeldet
CSS-Klasse per Javascript überschreiben
Ich möchte gerne StyleSheets per Javascript abändern. Bei HTML-Elementen, die eine ID haben oder bei HTML-Tags, funktioniert das auch problemlos.
Bsp.:
document.getElementsByTagName('body')[0].style.backgroundImage='url(hgr.gif)';
document.getElementById('seineId').style.backgroundColor='#630012';
Aber an die Styles komme ich einfach nicht ran. Es ist zum Verzweifeln. Ich habe schon eine ganze Weile herumprobiert und hoffe jetzt auf eure Hilfe.
Falls ich also ein Klasse
.meineKlasse { }
definiert habe, wie komme ich dann per JS zwecks Änderung wieder an diese Klasse heran?
-
Hallo Thomas.
wie komme ich dann per JS zwecks Änderung wieder an diese Klasse heran?
Mittels http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className. Die Bezeichnung class gehört zu den <http://de.selfhtml.org/javascript/sprache/reserviert.htm#uebersicht@title=reservierten Wörtern>, daher dieser ungewöhnliche Name.
Einen schönen Montag noch.
Gruß, Ashura
-
Hallo Ashura.
wie komme ich dann per JS zwecks Änderung wieder an diese Klasse heran?
Mittels http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className. Die Bezeichnung class gehört zu den <http://de.selfhtml.org/javascript/sprache/reserviert.htm#uebersicht@title=reservierten Wörtern>, daher dieser ungewöhnliche Name.
Entschuldige bitte, aber das ist mir jetzt ein bisschen hoch. :(
Nehmen wir an, ich habe in der Klasse
.roterText {color: #ff0000}
vor, den roten Text in blau abzuändern. Also
<script language=javascript>
className = 'roterText';
document.styles.className.color = '#0000ff';
</script>geht leider nicht. Was mache ich falsch? Vielleicht bist du ja so lieb und gibst mir den entscheidenden Tipp.
Lieben Gruß, Thomas
PS: Das Dumme ist, das noch nicht einmal eine Fehlermeldung kommt... Ich habe es auch schon mit einer bedingten Anweisuung probiert, es ist zum Mäuse melken.
-
Hallo Thomas.
Nehmen wir an, ich habe in der Klasse
.roterText {color: #ff0000}vor, den roten Text in blau abzuändern.
Vorhin wolltest du noch die gesamte Klasse abändern.
Dies tut man mit className. Was du nun willst, ist etwas anderes.<script language=javascript>Bitte verzichte auf das veraltete language-Attribut.
Nutze das geläufige http://de.selfhtml.org/html/transit/scripts.htm#definieren@title=type-Attribut.
Verzichte nicht auf die Anführungszeichen für Attributwerte.className = 'roterText';
document.styles.className.color = '#0000ff';
Mir ist kein Unterobjekt „styles“ beim document-Objekt bekannt. Zudem ist die Bezeichnung „roterText“ für eine Klasse denkbar ungeeignet. Was, wenn du in einem halben Jahr entscheidest, dass der Text nun plötzlich marineblau sein soll? Wirst du dann immer wissen, dass „roterText“ für marineblauen Text steht? Die Bezeichnungen für IDs und Klassen sollten immer Aufschluss über den jeweiligen Inhalt geben. > geht leider nicht. Was mache ich falsch? Vielleicht bist du ja so lieb und gibst mir den entscheidenden Tipp. Warum legst du nicht einfach die beiden gewünschten Klassen fest und wechselst sie wie beschrieben? Oder willst du lediglich einzelne CSS-Eigenschaften ändern? Es gibt--anhängig von deiner HTML-Struktur--noch weitaus mehr Zugriffsmethoden für Objekte, als getElement\*. Poste daher entweder den betroffenen Teil deines Dokumentes oder stelle eine Live-Demo online. > PS: Das Dumme ist, das noch nicht einmal eine Fehlermeldung kommt... Dann nutze die JS-Konsole von Firefox. Einen schönen Montag noch. Gruß, Ashura -- [The End of an Era...](http://www.nightwish.com/english/lettertotarjaen.html)-
Hallo Meister.
Warum legst du nicht einfach die beiden gewünschten Klassen fest und wechselst sie wie beschrieben?
Oder willst du lediglich einzelne CSS-Eigenschaften ändern?
Genau das will ich.
Es gibt--anhängig von deiner HTML-Struktur--noch weitaus mehr Zugriffsmethoden für Objekte, als getElement*.
Poste daher entweder den betroffenen Teil deines Dokumentes oder stelle eine Live-Demo online.Das Dumme ist: Es ist nicht meine Struktur. Ich habe eine Online-Datenbank bei 1und1 erstellt. Und jetzt haben die Jungs dort einige Vorlagen für das Aussehen der Datenbank und die wollte ich jetzt meinen Gegebenheiten anpassen. So weiß ich also, dass die Klasse z.Bsp. "field" heißt und möchte gerne die Schriftfarbe ändern, weiß aber nicht, wie ich an dieses Objekt herankomme.
Zur Verdeutlichung:
http://projekte.gymnasium-sonneberg.de/tinc?key=Fmo8znPx&formname=Ehemalige
Ebenfalls noch einen angenehmen Montag. ;)
Thomas
-
-
Hallo,
Nehmen wir an, ich habe in der Klasse
.roterText {color: #ff0000}
vor, den roten Text in blau abzuändern.
Probiere es ueber die document.styleSheets-Collection:
function ChangeCSSRules(sel,prop,val) { var styleobj; if(document.styleSheets) { if(document.styleSheets.item(0).rules)styleobj=document.styleSheets.item(0).rules; // IE else if(document.styleSheets.item(0).cssRules)styleobj=document.styleSheets.item(0).cssRules; // Moz } if(styleobj)styleobj.item(sel).style[prop]=val; }...
<p class="roterText" onclick="ChangeCSSRules('roterText','color','#00F')">Text</p>Der Austausch von Klassennamen ueber className ist allerdings praktikabler und wird von den aktuellen Browsern besser unterstuetzt.
Eine Alternative zur Zuweisung von Style-Eigenschaften bietet die Methode setProperty():
if(styleobj)styleobj.item(sel).style.setProperty(prop,val,"");Wichtig ist hier der dritte Parameter (die Prioritaet, die meistens ein Leerstring ist, aber auch important sein kann). Firefox unterstuetzt diese Methode (auch im SVG-Kontext).
MfG, Thomas
-
Hallo Thomas.
Vielen Dank erstmal, ich werde das morgen mal ausprobieren. Meine Augenn sind schon viereckig. ;)
Lieben Gruß
Thomas
-
Hi,
Vielen Dank erstmal, ich werde das morgen mal ausprobieren. Meine Augenn sind schon viereckig. ;)
Eine etwas komfortablere Routine gibt es hier: Coding: CSS-Regeln auslesen & ändern
Ist die Funktion eingebunden, wäre dein Problem mit folgendem Aufruf gelöst:
cssRule(".roterText","color","#0000ff");
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hallo,
Eine etwas komfortablere Routine gibt es hier: Coding: CSS-Regeln auslesen & ändern
Was ist denn CSSRule.indexText?
Mathias
-
Hi,
Was ist denn CSSRule.indexText?
Definitiv was anderes als cssRule().indexText! =;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! -
Hi,
Was ist denn CSSRule.indexText?
LOL, alles klar. Ich hab nicht sofort verstanden, was Du wolltest. Irgendwann ist bei mir bei einem Search'n'Replace das selector im Script durch ein index ersetzt worden - und in meiner globalen JS-Datei, die ich nutze, nicht. =:-o
Danke für den Hiinweis, wird umgehend korrigiert! %-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
Hallo,
if(styleobj)styleobj.item(sel).style[prop]=val;
Äh, das wundert mich aber.
Wieso sollte item() einen String entgegennehmen? Und dann auch noch, wenn man »roterText« übergibt, die Regel mit dem Selektor ».roterText« zurückgeben?
Kann es sein, dass item("String") einfach zu item(0) wird und somit die erste Regel zurückliefert, also nicht unbedingt die gewünschte? Man muss also nach wie vor alle Regeln durchlaufen und selectorText prüfen.Mathias
-
Hallo,
Kann es sein, dass item("String") einfach zu item(0) wird und somit die erste Regel zurückliefert, also nicht unbedingt die gewünschte? Man muss also nach wie vor alle Regeln durchlaufen und selectorText prüfen.
Danke fuer den Hinweis! Ich habe mein frueheres (vermeintlich funktionierendes) Beispiel abgewandelt und es ist so wie von Dir vermutet, es wurde von IE und Firefox item(0) angenommen. Im Hinterkopf hatte ich namedItem(), was hier aber nicht existiert.
So sollte es dann laufen:
if(styleobj) { for(i=0;i<styleobj.length;i++) if(styleobj.item(i).selectorText==sel)styleobj.item(i).style[prop]=val; }mit
<p class="roterText" onclick="ChangeCSSRules('.roterText','color','#00F')">Text</p>BTW: Hier noch die erwaehnte Verwendung der styleSheets-Collection im SVG-Kontext (ASV 6 oder FF 1.5).
MfG, Thomas
-
-
Erstmal entschuldige ich mich bei euch für die lange Wartezeit.
function ChangeCSSRules(sel,prop,val)
{
var styleobj;if(document.styleSheets)
{
if(document.styleSheets.item(0).rules)styleobj=document.styleSheets.item(0).rules; // IE
else if(document.styleSheets.item(0).cssRules)styleobj=document.styleSheets.item(0).cssRules; // Moz
}if(styleobj)styleobj.item(sel).style[prop]=val;
}> > ... > > ~~~html > <p class="roterText" onclick="ChangeCSSRules('roterText','color','#00F')">Text</p>Funktioniert! Danke.
Der Austausch von Klassennamen ueber className ist allerdings praktikabler und wird von den aktuellen Browsern besser unterstuetzt.
Habe ich mir mittlerweile auch überlegt.
Eine Alternative zur Zuweisung von Style-Eigenschaften bietet die Methode setProperty():
mit setProperty bin ich nicht klargekommen, es geht aber mit setAttribute.
Nochmal vielen Dank. Du hast mir sehr geholfen und mir neue Einsichten in JS verschafft. Da ich nur selten damit arbeite, bin ich mit den Objekten, Eigenschaften und Methoden nicht so vertraut und da kann man schon verzweifeln.
Lieben Gruß
Thomas
-
-
-