✔ Css mit Javascript ändern?

AGSzabo

AGSzabo

Mitglied
Hallo,
ich habe schon wieder ein Problem. Und zwar möchte ich mit Javascript die Einstellungen in den Stylesheets ändern und zwar per Zugriff auf Klassen direkt in den Stylesheetdefinitionen, nicht auf die einzelnen Objekte bezogen. Beispiel: alle Objekte der class "Green" sollen bei click auf den link grün werden.

HTML: 
<html><head><title>Test</title>
<script type="text/javascript">
function MachFarbe () {
 document.classes.Green.all.color="green";
}
</script>
</head><body>
<p class="Green">Das ist der Text</p>
<div class="Green">Das ist der zweite Text</div>
<a href="javascript:MachFarbe()">gruen</a>
</body></html>

Es geht aber nicht. Warum?

AGS
 
Zuletzt bearbeitet:
Hi,

was meldet denn die Firefox-Fehlerkonsole?

Eine Objekteigenschaft namens "classes" gibt es erstens überhaupt nicht, und zweitens nicht für das document-Objekt, dafür aber die Objekteigenschaft className für das all-Objekt bzw. die getElementById()-Methode (DOM).

mfg Maik

_log:
["className" in den Stichworten aufgenommen]
 
Hui, das war echt eine Express-Antwort. Ok, also die Fehlerkonsole. Die sagt, dass document.className nicht existiert, genauso wie .classes .
 
Hi,
Die sagt, dass document.className nicht existiert, genauso wie .classes .
Zum Vergrößern anklicken....

Warum erstellst Du nicht nen/ne neuen/neue CSS Selctor/Klasse mit der Farbe: green, und weist du dann dem
Element, die neue CSS Klasse "green" mit JavaScript zu. übrigens, ich würde es mit: #id auch lieber machen.

Gruß
Messmar
 
Hab da noch einen grundsätzlichen Tipp - sozusagen "Mein Wort zum Sonntag" bei der aktuellen Uhrzeit :)

Wenn du in JS für eine CSS-Eigenschaft deren Eigenschaftswert angeben / ändern möchtest, gehört in der Syntax vor dieser auch das erforderliche style-Objekt genannt:

Code: 
style.color="green";


Die Objektreferenz bzw. die Hierarchie der Objekte im Dokumentenbaum scheint mir schon aus deinem letzten Thread noch dein derzeitiges "Handicap" zu sein.

mfg Maik
 
Das Script soll ja im Header der HTML-Seite ausgeführt werden, noch bevor irgendwelche Elemente erzeugt sind, aber schon nach dem Einlesen der Sytlesheets. Die Veränderungen per Javascript sollen direkt in die css Informationen eingreifen, so dass alle nachfolgend erzeugten Elemente mit den vom Script gesetzten Style erscheinen. Bisher ist es leider so, dass die Seite erst mit den im css definierten Werten erscheint und erst als sie fertiggeladen hat die vom Script gesetzten Werte annimt und darstellt. Das sieht dann in der Praxis so aus, das zB der Seitenhintergrund beim laden der Seite gelb ist, aber wenn die Seite fertig geladen hat, auf Gruen umschaltet. Also muss ich die neue Farbe aus dem Header der HTML-Seite setzen. Aber wie, wenn noch keine Elemente da sind, nur die css Infos aus den css Dateien bzw aus dem header (oder auch keine css Definitionen, dann werden sie durch das Script erzeugt).
 
Verwende doch einfach für jedes dieser "Seiten-Farbsets (Hintergrund-/Vordergrundfarben)" eine eigene CSS-Datei, in der sich die einzelnen Seitenelemente dann auch bequem bis ins Detail durchstylen lassen, und lad diese nachträglich ins Dokument.

CSS-Styleswitcher mit PHP ist ein serverseitiger Lösungsansatz, der nicht auf ein aktiviertes JS im Client angewiesen ist.

mfg Maik
 
Nachladen bewirkt, dass die Seite bis sie geladen ist mit dem Default-Design erscheint und dann in das gewählte Design umschaltet. Ich koennte aber das Default-Design so machen, dass darin alles weiß auf weiß ist und der text "Loading..." angezeigt wird. Naja .. man kann dann aber nimmer zu Lesen anfangen solange die Seite noch nicht voll geladen ist ... und je nach Komplexität und Textmenge kann das schon "ärgern".

Btw, wie tausche ich das Stylesheet aus?
 
Zuletzt bearbeitet:
AGSzabo hat gesagt.:
Btw, wie tausche ich das Stylesheet aus?
Zum Vergrößern anklicken....
Moin,

versteh die Frage nicht. Hast du dir das empfohlene Tutorial nicht näher angeschaut, und das darin angehängte Beispiel getestet?

@Nachladen: dass das Farbset beim "Switchen" erst nach dem vollständigen Laden der Seite angezeigt wird, wirst du so oder so nicht verhindern können.

mfg Maik
 
Moin,
Wenn du in JS für eine CSS-Eigenschaft deren Eigenschaftswert angeben / ändern möchtest, gehört in der Syntax vor dieser auch das erforderliche style-Objekt genannt:
Zum Vergrößern anklicken....

Das stimmt, aber man kann dieCSS bzw. die Klasse eines Elemenst im Baum auch per JS ändern, ohne die CSS definition
direkt im Element Tag eingeben zu müssen. (inlineStyles). und ohne das "style" Objekt ansprechen zu müssen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>

<body>
<style>
ul{style-list-type:none; margin:0; padding:0;}

#oldColor{color:#0000ff;}
#newColor{color:#cdef00;}
</style>
<ul><li id="oldColor">test</li></ul>
<script>
<!--
document.getElementById('oldColor').id = 'newColor';
//-->
</script>
</body>
</html>

Die Objektreferenz bzw. die Hierarchie der Objekte im Dokumentenbaum scheint mir schon aus deinem letzten Thread noch dein derzeitiges "Handicap" zu sein
Zum Vergrößern anklicken....

Das mag bei einigen Fällen sein (oder habe ich mich nur vertippt !)... aber niemand ist perfekt und keiner kann alles wissen :) aber in diesem Fall, hast
du dich einfach geirrt, würde ich sagen.

Gruß und einen schönen Tag noch
Messmar

Btw, wie tausche ich das Stylesheet aus?
Zum Vergrößern anklicken....

Du könntest die JQuery JavaScript Framework: http://de.wikipedia.org/wiki/JQuery verwenden... damit kannst Du
die CSS Eingenschaften sauber verändern: http://docs.jquery.com/Selectors/class#class

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $(".myClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div class="notMe">div class="notMe"</div>
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
</body>
</html>

Gruß
Messmar
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück