Player1005: mit DHTML Stylesheets ändern

Hallo,

ich habe ein Element, das ich zuerst nicht anzeigen möchte. das kann ich über css auf zwei arten machen:

1. stylesheet-klasse anlegen mit ".myelement{display: none;}"
   und anschließend das Element darauf verweisen mit "<table class="myelement">"

2. direkt im tag über style: "<table style='display:none;'>"

womit ich mein element versteckt hätte.

nun möchte ich das element auf knopfdruck wieder anzeigen können

dazu habe ich das hier gebastelt (d ist das Element):
   if (d.style.display == "none") {
     d.style.display = "";
  } else {
     d.style.display = "none";
  }
}

das funktioniert wunderbar mit der 2. Methode, aber leider nicht wenn ich meine Stylesheets über Klassen definiere. Das ist aber was ich bräuchte, da ich mehrere Elemte aktivieren und deaktivieren muss!

Vielen Dank schon mal für Postings!
Player1005

  1. Wie hast du das Element 'd' denn erstellt oder eingelesen?

    1. das übergebe ich über eine funktion mit
      onclick="myfunction(this)"

      und die funktion:
      function(d) {...}

  2. hi,

    if (d.style.display == "none") {
         d.style.display = "";
      } else {
         d.style.display = "none";

    mittels javascript kannst du auf diese weise style-werte nicht auslesen, wenn sie nicht per javascript selbst oder direkt am element gesetzt wurden.

    macht aber nix, lösung ist ganz einfach: drehe die abfrage einfach um!

    if (d.style.display == "block") {
          d.style.display = "none";
       } else {
          d.style.display = "block";

    block ist default-displaywert für <table>.
    da das aulesen wie oben gesagt im ersten versuch nicht funktionieren kann, trifft die bedingung beim ersten mal also nicht zu, und die tabelle ist ja per klasse aktuell unsichtbar gemacht - sie wird nun auf block umgeswitcht.

    da dieser wert jetzt direkt per javascript gesetzt wurde, lässt er sich in der folge auch auslesen.
    beim nächsten aufruf der funktion wird also erkannt, dass die tabelle derzeit block als wert für display hat, es wird auf none umgeswitcht.
    und bei none dann wieder block, etc. pp.

    gruß,
    wahsaga

    --
    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
    1. Super!

      Funktioniert Wunderbar!

      Danke!!

    2. Hi,

      block ist default-displaywert für <table>.

      Sicher?
      Ich hätte vermutet, daß der default-Wert für <table> bei der display-Eigenschaft table ist.

      Kurzer Test im Mozilla mit folgendem Code:

      <table id="testtable"><tr><td>blubb</td></tr></table>
      <script type="text/javascript">
      alert(document.defaultView.getComputedStyle(document.getElementById("testtable"),"").getPropertyValue("display"));
      </script>

      bestätigt meine Vermutung, es wird table angezeigt.
      Opera zeigt auch table an.

      (Beim IE mag das anders sein, der kennt ja auch den Wert table-cell nicht - und defaultView kennt er auch nicht, so daß obiger Code nur zu ner Fehlermeldung führt)

      Es ist m.E. besser, statt "block" einen Leerstring zuzuweisen, da sonst korrekte Browser den falschen Wert "block" statt "table" verwenden müßten.

      cu,
      Andreas

      --
      MudGuard? Siehe http://www.Mud-Guard.de/
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.