Sebastian K.: Unterschied zw. class-zuweisung u. direkter zuw. im Style???

SELF-Forum

Unterschied zw. class-zuweisung u. direkter zuw. im Style???

Sebastian K.
– Informationen zu den Bewertungsregeln

Hallo

Ich habe folgendes Problem:
Ich habe mir ein dynamisches Menü in Tabellenform zusammen gebastelt...
wenn ich nun die Display-eigenschaft des TR-Tags direkt hineinschreibe
<tr ID="tr1" class="lvl_1" style='display:none' align='left'>
kann ich mit Javascript diese Eigenschaft zur Laufzeit wieder ändern.
Wenn ich es aber in der class: lvl_1 definiere, dann funzt meine javascript funktion(en) nimmer... :-(

PS: Wer Rechtschreibfehler findet, darf sie behalten ;-)

hier mal das beispiel wie es nicht funktioniert, weil die display-eigenschaft im css definiert ist

<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <script type="text/javascript" >
   function display(ids){
    var id = ids.split("/");
    for (var i = 0; i < id.length; i++) {
     //alert(id[i] + "->" + document.getElementById(id[i]).style.display);
      if(document.getElementById(id[i]).style.display != 'none'){ //element ausblenden
      changeStatus(id[i], 'none');
     }
     else{
      //alert("gleich none");                                //element einblenden
      changeStatus(id[i], 'table-row');
     }
    }
   }
   function changeStatus(id, status){
    var i = 0;
    if(status == 'none'){ //element ausblenden
     document.getElementById(id).style.display = 'none';
     while(document.getElementById(id + "_" + ++i)!= null){
       changeStatus(id + "_" + i, 'none');
     }
    }
    else{                 //element einblenden
     document.getElementById(id).style.display = '';               //wirkt wie "table-row"
    }
   }
  </script>
  <style type="text/css">
   img.lvl_1{width:10px; height:12px}

tr.lvl_0{background-color:#FFF4C4}
   tr.lvl_1{background-color:#FFF0A8; display:none}
  </style>

<Title></title>
 </head>
 <body>
  <table border='0'>
   <tr class="lvl_0" style='vertical-align:bottom' align='left'>
    <td><a href='javascript:display("tr1")'>IS-H</a></td>
   </tr>

<tr ID="tr1" class="lvl_1" style='vertical-align:bottom' align='left'>
     <td>
      <img class="lvl_1" src="..\bilder\trans.gif" Alt="" >
      <a href=''>IS-H / IS-H * Med.</a>
     </td>
   </tr>
  </table>
 </body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Unterschied zw. class-zuweisung u. direkter zuw. im Style???

    wahsaga Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    hi,

    wenn ich nun die Display-eigenschaft des TR-Tags direkt hineinschreibe
    <tr ID="tr1" class="lvl_1" style='display:none' align='left'>
    kann ich mit Javascript diese Eigenschaft zur Laufzeit wieder ändern.
    Wenn ich es aber in der class: lvl_1 definiere,

    dann kannst du das immer noch genauso.

    dann funzt meine javascript funktion(en) nimmer...

    Dann liegt das an deiner Funktion.

    if(document.getElementById(id[i]).style.display != 'none')

    Es wurde hier schon häufig erwähnt, dass du über das style-Objekt die Werte von CSS-Eigenschaften nur dann auslesen kannst, wenn sie a) per style-Attribut direkt im Element, oder b) zuvor per Javascript über style gesetzt wurden.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln