Wie werden css Klassen im Javascript definiert?

[canorac@web.de]

Hallo
Ich habe nun schon seit einiger Zeit das Problem ein dynamisches css-Menue zu erstellen, welches bei Mauskontakt ein Untermenue öffnet. Ich habe dafür ein bei selfhtml erklärtes script (http://de.selfhtml.org/css/layouts/n...onsleisten.htm,
so modifiziert, dass es auf meine Bedürfnisse zu geschnitten ist. das hat auch funktioniert, mein Problem ist jetzt "nur" noch dieses auch für den Internet Explorer sichtbar zu machen. Auf der selben Seite bei selfhtml wie oben, ist dieses auch mit einem Javascript realisiert worden. Aber ich bekomme es noch nicht hin die dort verwendeten Verweise auf die Listenelemente LI und UL so zu verändern, dass diese auf eine bzw. zwei css Klassen verweisen.
Mein Frage ist also wie verweise ich in einem Javascript auf eine css-Klasse?

Ich habe den Quelltext angehängt, und hoffe, dass ich mein Problem nicht zu komliziert dargestellt habe und jemand weiß, wie ich das javascript richtig heißen muss.

Herzlichen Dank schon mal für eure Hilfe


Der bislang falsche Javascript:

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.visibility = "visible"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.visibility = "hidden";
  }

  window.onload=hoverIE;
}
</script>

Mein modifizierter Quellcode, der aber noch nicht fertig ist (nicht wundern, wegen dem pink, das war, um festzustellen, ob es und wie es umgesetzt
wird :

<style type="text/css">
  body, p a {
        color: black; background-color: #f2f2f2;
  }

  div#Rahmen {
    width: 293px;
    padding: 5.8em;
    border: 1px solid black;
    background-color: #f2f2f2;
    left: 217px;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  div#Navigation {
    margin: 0; padding: 0;
    text-align: left;
  }

  div#Navigation div.e1 {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation div.e1 {  /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
  }

  div#Navigation div.e1 div.ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.3em; left: 0.0em;
    visibility: hidden;
    background-color: red  /* Unternavigation ausblenden */
  }
  * html div#Navigation div.e1 div.ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  div#Navigation div.e1:hover div.ul {
    visibility: visible;
    background-color: #e6e6e6  /* Unternavigation in modernen Browsern einblenden */
  }
  div#Navigation div.e1 div.ul div.il {
    float: none;
    visibility: visible;
    margin-bottom: 0.2em;
  }

  div#Navigation a, div#Navigation span {
    display: block;
    width: 15.0em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 0.8em;
    text-decoration: none; font-weight: bold;
    color: black; background-color: #f2f2f2;
  }
  * html div#Navigation a, * html div#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell f&uuml;r IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  div#Navigation a:hover, div#Navigation span,  div.e1 /* a#aktuell */   {
     color: pink; /* markiertes element*/ 
  }

#1 { height: 22px; width: 65px; left: 100px; top: 50px; position: absolute; visibility: visible; }
#2 { height: 21px; width: 54px; left: 171px; top: 50px; position: absolute; visibility: visible; }
#home { height: 16px; width: 43px; left: 51px; top: 50px; position: absolute; visibility: visible; }
#3 { height: 21px; width: 99px; left: 231px; top: 50px; position: absolute; visibility: visible; }

</style>
</head>

<body>
  <div id="Navigation">
    <div id="home"class="e1"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel">xx</a></div>

    <div id="1"class="e1">
    
    	<font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel">xx</a>
      	<div id="1_ge" class="ul">
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21.0em; margin-top: 0.4em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21.0em; margin-top: 20px;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21em;">xy </a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6;width: 21em; margin-bottom: 0.4em;">xy</a></div>
       	</div>
    </div>

    <div id="2" class="e1">
    <font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel">xx</a>
    	<div id="2_ge" class="ul">
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6; width: 20.0em; margin-top: 0.4em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6; width: 20.0em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6; width: 20.0em;">xy</a></div>
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6; width: 20.0em; margin-bottom: 0.4em">xy</a></div>      
       	</div>            
    </div>

    <div id="3" class="e1"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel">xx</a>
      	<div class="ul">
        	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6; width: 7.0em; margin-top:0.4em;">xy</a></div>
           	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6; width: 7.0em;">xy</a></div>
           	<div class="li"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="#Beispiel" style="background-color:#e6e6e6; width: 7.0em; margin-bottom:0.4em;">xy</a></div>
       	</div>
    </div>


  </div>
 

</body>

[canorac@web.de]

hat denn keiner eine Idee wie ich das Javascript verändern muss?

[Traumweber]

Hi,

probier's mal mit:

elem = document.getElemetById("myElement"); // Element referenzieren
neuClass = document.createAttribute("class"); // neues Attribut erzeugen
className = "myCSS"; // die neue CSS-Klasse
neuClass.nodeValue = className; // ins neue Attribut eintragen
elem.setAttributeNode(neuClass); // Attribut an Element hängen

Falls bereits ein Attribut "class" exostiert, wird der alte Inhalt ersetzt.

Hoffe, das hilft Dir weiter...