André: Funktion verändern

Hallo zusammen!

Ich habe eine JS-Funktion im Netz gefunden und zwar diese hier: www.homepage-vorlagen-webdesign.de/homepage-tipps/javascript-text-oder-grafik-ein-ausblenden-auf-zuklappen-26.php.

Ich würde gern, dass ein ausgeklappter Text eine andere Farbe (oder ggf. andere Formatierungseigenschaften wie z.B. Fettdruck) hat, als wenn dieser Text eingeklappt ist.

Dazu muss man bestimmt nur einen bestimmten kleinen Befehl an die richtige Stelle setzen. Leider reichen meine marginalen Kenntnisse für diese Änderung nicht aus.

Wenn mir jemand helfen könnte, wäre ich sehr dankbar!

Vielen Dank und beste Grüße,

André  :D

  1. www.homepage-vorlagen-webdesign.de/homepage-tipps/javascript-text-oder-grafik-ein-ausblenden-auf-zuklappen-26.php.

    Die ist zwar nicht unbedingt elegant, tut aber ihren Zweck.

    Ich würde gern, dass ein ausgeklappter Text eine andere Farbe (oder ggf. andere Formatierungseigenschaften wie z.B. Fettdruck) hat, als wenn dieser Text eingeklappt ist.

    Der style-Eintrag eines Objektes enthält seine CSS-Eigenschaften. Die Javascript-Zeile e.style.display="block" macht hier also das Gleiche wie der Eintrag display:block in einer CSS-Datei bzw. einem <style>-Block. Möchtest du andere Eigenschaften wie beispielsweise die http://de.selfhtml.org/css/eigenschaften/schrift.htm@title=Schrift ändern, füge entsprechende Zeilen hinzu.

    Die Frage ist nur, warum du Wert darauf legst, bei einem Element, das nicht angezeigt wird ("wenn dieser Text eingeklappt ist"), sein dann logischerweise nicht vorhandenes Aussehen zu ändern …

    1. Hallo "Quark mit Strudel"!

      Ich sehe gerade, dass ich mich ziemlich undeutlich ausgedrückt habe. Also ein weiterer Versuch in der Hoffnung, dass dies (einfach) zu lösen ist:

      Ich möchte, dass der angeklickte Link eine andere Farbe (oder ggf. andere Formatierungseigenschaften wie z.B. Fettdruck) bekommt, also wenn der Text darunter ausgeklappt ist - gegenüber der Textfarbe dieses Links, wenn der Text darunter noch nicht aufgeklappt wurde bzw. wieder eingeklappt wurde.

      Ich hab's mit: e.style.display="block;font-weight:bold" probiert, aber dann tut es gar nichts mehr (von wegen ausklappen).

      Vielen Dank,

      André  :D

      1. Ich möchte, dass der angeklickte Link eine andere Farbe (oder ggf. andere Formatierungseigenschaften wie z.B. Fettdruck) bekommt, also wenn der Text darunter ausgeklappt ist - gegenüber der Textfarbe dieses Links, wenn der Text darunter noch nicht aufgeklappt wurde bzw. wieder eingeklappt wurde.

        Ich hab's mit: e.style.display="block;font-weight:bold" probiert, aber dann tut es gar nichts mehr (von wegen ausklappen).

        Schau dir die Originalzeile nochmal genau an, javascriptiges e.style.display="block" entspricht CSS-seitig der Anweisung display:block. Das Schema ist also e.style.[CSS-Eigenschaft]="[Wert]".

        Für mehrere Eigenschaften wäre dementsprechend nachfolgendes korrekt:

        e.style.display="block";
        e.style.fontWeight="bold";

        Ein paar Zeilen über http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften findest du ein Beispiel.

        Dies aber nur als Theorie, denn wir ändern immer noch nur das Element, dessen ID im Argument a übergeben wurde. Du möchtest aber zwei bearbeiten.

        Probier's stattdessen hiermit:

        <head>

        <script>
        function tricker(schalter, block) {
           if (block = document.getElementById(block)) {
              if (block.style.display != "block") { /* Block wird nicht angezeigt, einblenden */
                 block.style.display = "block";
                 schalter.style.fontWeight = "bold";
                 schalter.style.color = "#f00";
              }
              else { /* Block wird angezeigt, ausblenden */
                 block.style.display = "none";
                 schalter.style.fontWeight = ""; /* "" = Vorgabe benutzen */
                 schalter.style.color = "";
              }
           }
           return true;
        }
        </script>

        </head>

        <body>
        <div><a onclick="return tricker(this, '1')" href="javascript:void(0)">
        Frage 1: Gibt es hier auch Homepagevorlagen?</a></div>
        <div id="1" style="display:none">Antwort: ja</div>
        </body>

        1. Dies aber nur als Theorie, denn wir ändern immer noch nur das Element, dessen ID im Argument a übergeben wurde. Du möchtest aber zwei bearbeiten.

          Probier's stattdessen hiermit:

          Sensationell - es funktioniert! Tausend Dank!

          Falls Du oder irgend jemand anders, dessen Irrwege ihn hierhin führen, wissen möchte, was das ist: Es soll ein vereinfachtes Lernkarten-/Abfragesystem sein. Dieses Fach so ziemlich modular aufgebaut und deshalb machen solche strukturierten Fragen/Antworten Sinn.

          Die andere Link-Formatierung soll der Übersichtlichkeit dienlich sein und kenntlich machen, dass der Teil ausgeklappt ist. So sieht es bis jetzt aus: http://home.arcor.de/a0b1c2/Sozialpsychologie.html.

          Deine Hilfe wird also neben mir auch anderen und später folgenden Kommilitonen zur Hilfe kommen - da ich solche "Machenschaften" auch gern teile.

          In diesem Sinne - vielen Dank und beste Grüße,

          André  :D