Norman S.: Linkfarbe aller Links per JS ändern

Hallo,

ich möchte per Javascript die Farbe ALLER meiner Links ändern.
Bsp. User klickt auf z.B. ein Bild -> anschließend sind alle Links grün o.ä..

Die Links habe ich soweit mit CSS formatiert:
A:link { color: #EC15DE }
A:visited { color: #EC15DE }
A:active { color: #EC15DE }

Um alle Links nun neu einzufärben habe ich mir folgende Funktion gebastelt :
function aendereLinkFarbe() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].style.color = '#15EC2D';
    }  
}

Das funktioniert auch. Ich habe aber den Verdacht daß das nicht wirklich schick ist. Gibt es da eine bessere Möglichkeit? Vllt. daß JS dann auch gleich die Farben für "visited" und "active" ändert? Irgendwie find ich da so recht nix?!

Gruß
Norman

  1. Hi,

    du könntest mit JS ein neues CSS einfügen in dem du die Regeln für a:link, a:visited und a:active überschreibst.

    ~dave

    1. Lieber dave,

      du könntest mit JS ein neues CSS einfügen in dem du die Regeln für a:link, a:visited und a:active überschreibst.

      und wenn er zwischen einer fest definierten Anzahl an Farbschemata hin- und herschalten will, ist Dein Lösungsvorschlag dann noch immer gut? In einem Punkt gebe ich Dir allerdings recht: Wenn der User kein JavaScript aktiviert hat, dann ist der "überflüssige" CSS-Code in meinem Lösungsvorschlag eher störend. Daher könnte man meine Farbschemata tatsächlich über ein dynamisch nachgeladenes Stylesheet lösen.

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      1. Hi,

        ich find deine Lösung eigentlich in allen Punkten besser.
        Und eigentlich auch viel offensichtlicher...

        ~dave

  2. Lieber Norman S.,

    bevor Gunnar hier wieder anfängt, nehme ich seine Argumente gleich vorweg (wenn er nicht doch schneller ist).

    Du willst die Linkfarbe global im gesamten Dokument ändern? Oder auch nur in einem bestimmten Bereich? Egal, das machst Du lieber mit CSS! Zum Beispiel damit, dass Du dem <body>-Element (oder dem Elternelement Deines gewünschten Bereiches) eine (zusätzliche) Klasse gibst - mit JavaScript. Und im CSS-Code bestimmst Du dann eben Regeln, die mittels Nachfahrenselektor die "Standardfarbe" der Links überschreiben.

    /* Standardfarben für Hyperlinks */  
    a:link { color: #0000FF; }  
    a:visited { color: #660099; }  
    a:active { color: #FF0000; }  
      
    /* Farbschema "grün" */  
    body.green a:link { color: #33CC00; }  
    body.green a:visited { color: #336600; }  
    body.green a:active { color: #33FF00; }  
      
    /* Farbschema "orange" */  
    body.brown a:link { color: #FF9900; }  
    body.brown a:visited { color: #FF3300; }  
    body.brown a:active { color: #FFCC00; }
    

    Du siehst jetzt hoffentlich was ich meine. Die JavaScript-Funktion zum Hinzufügen oder Ändern des Klassennamens des passenden Elements (hier <body>) kriegst Du selber hin, oder?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. @@Felix Riesterer:

      nuqneH

      bevor Gunnar hier wieder anfängt, nehme ich seine Argumente gleich vorweg (wenn er nicht doch schneller ist).

      Kaum ist die Katze mal aus dem Haus, tanzen hier die Mäuse‽ ;-)

      /* Farbschema "orange" */
      body.brown a:link { color: #FF9900; }
      body.brown a:visited { color: #FF3300; }
      body.brown a:active { color: #FFCC00; }[/code]

      Orange heißt brown? Ich muss mein Englisch auffrischen. ;-)

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. Hallo,

        /* Farbschema "orange" */
        body.brown a:link { color: #FF9900; }
        Orange heißt brown?

        das nicht, ich bin auch etwas verblüfft. Aber #F90 sieht allein durch Abschätzen der RGB-Komponenten tatsächlich eher orange als braun aus. Um den Eindruck von Braun zu bekommen, müsste man schon auch die Rot-Komponente etwas reduzieren.

        Ich muss mein Englisch auffrischen. ;-)

        If you say so.

        Englischer Hausherr zum polnischen Au-pair-Mädchen: "So you want to polish up your English?"
        Antwortet das Mädchen: "Oh, I think my English is Polish enough."

        Ciao,
         Martin

        --
        Most experts agree: Any feature of a program that you can't turn off if you want to, is a bug.
        Except with Microsoft, where it is just the other way round.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      2. Lieber Gunnar Bittersmann,

        body.brown a:link { color: #FF9900; }

        Orange heißt brown? Ich muss mein Englisch auffrischen. ;-)

        ich wollte zuerst braune Farben nehmen, habe dann auf orange umgestellt (wegen der besseren Farbwerte) und dann vergessen, die Klasse umzubenennen - wollte auf jeden Fall _vor_ Dir posten. Grrr. ;-)

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Mahlzeit Felix Riesterer,

          ich wollte zuerst braune Farben nehmen, habe dann auf orange umgestellt (wegen der besseren Farbwerte) und dann vergessen, die Klasse umzubenennen

          Was wieder einmal beweist, dass man Klassen *NIEMALS!!!11einseinsELF* nach ihrer derzeitigen Darstellungsform/-farbe etc. benennen sollte - sondern semantisch danach, was sie *ausdrücken* bzw. *inhaltlich darstellen* sollen ...

          MfG,
          EKKi

          --
          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          1. Hi,

            Was wieder einmal beweist, dass man Klassen *NIEMALS!!!11einseinsELF* nach ihrer derzeitigen Darstellungsform/-farbe etc. benennen sollte - sondern semantisch danach, was sie *ausdrücken* bzw. *inhaltlich darstellen* sollen ...

            Damit hab ich manchmal meine Probleme, wie würdest du hier die Klasse nennen?
            "themeEins"?^^
            Bei diesem Anwendungsfall find ich "brown", "yellow" und ähnlich nicht so schlimm.

            ~dave

            1. Mahlzeit dave,

              Damit hab ich manchmal meine Probleme, wie würdest du hier die Klasse nennen?

              Das kommt darauf an ...

              "themeEins"?^^

              Wie wär's mit "themeGreen"?

              Bei diesem Anwendungsfall find ich "brown", "yellow" und ähnlich nicht so schlimm.

              Nun - *DANN* sollte man sich aber nicht darüber mokieren, dass die Links ja gar nicht braun, sondern orange sind ...

              MfG,
              EKKi

              --
              sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
              1. @@EKKi:

                nuqneH

                Wie wär's mit "themeGreen"?

                Der bedeutende Unterschied zu "green" wäre welcher?

                Wie wär’s mit "themeSpring", "themeSummer", "themeAutumn", "themeWinter"?

                Sowohl orangene als auch braune Blätter (oder eben Links) sind im Herbst denkbar.

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Hi,

                  Wie wär’s mit "themeSpring", "themeSummer", "themeAutumn", "themeWinter"?

                  Sowohl orangene als auch braune Blätter (oder eben Links) sind im Herbst denkbar.

                  Das finde ich ein bisschen an den Haaren herbei gezogen.
                  Wenn ich bei meiner Theme-Auswahl zwischen den Jahreszeiten wählen kann sind die Klassenbezeichnungen perfekt, wenn ich aber nur zwischen Farben wählen kann finde ich Farbnamen als Klassenbezeichnung absolut richtig.

                  ~dave

                  1. Hi,

                    Wenn ich bei meiner Theme-Auswahl zwischen den Jahreszeiten wählen kann sind die Klassenbezeichnungen perfekt, wenn ich aber nur zwischen Farben wählen kann [...]

                    ... dann heißt das für mich meist nur, dass der Designer selber unentschlossen ist und nicht zu seinem Werk steht.

                    Du als Designer (d)einer Seite solltest mich *überzeugen* (können), dass du ein in sich stimmiges Werk erstellt hast - dann brauche ich keinen „Theme“-Wechsler, der verschiedene Farbvarianten anbietet.

                    Wenn du von der Farbwahl deines Designs nicht genug überzeugt bist - dann brauchst du gar keine Farben angeben, dann kannst du die meinem Browser- bzw. User-Stylesheet überlassen.

                    <disclaimer> Das ist eine pauschalisierte Meinung. Abweichungen in Einzel-/Sonderfällen sind möglich. </disclaimer>

                    MfG ChrisB

                    --
                    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                2. Mahlzeit Gunnar Bittersmann,

                  Wie wär's mit "themeGreen"?

                  Der bedeutende Unterschied zu "green" wäre welcher?

                  Z.B. der, dass nicht die ganzen Haarspalter und Besserwisser des Forums aus ihren Löchern kommen und mosern, dass "#FF9900" ja gar nicht braun ergibt ... ;-P

                  Nur weil ein Theme nämlich "Brown" heißt, heißt das noch lange nicht, dass mit Benutzung dieses Themes *alle* Elemente braun sein müssen - Entsprechendes gilt natürlich auch für andere Farben.

                  MfG,
                  EKKi

                  --
                  sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  3. Hallo,

    ich möchte per Javascript die Farbe ALLER meiner Links ändern.
    Bsp. User klickt auf z.B. ein Bild -> anschließend sind alle Links grün o.ä..

    Du meinst eine Weltkarte: Man klickt auf Japan, anschließend sind in Baden-Württemberg fast alle Links grün, alle Rechts auch, und ziemlich alle Gelb sind weg... cool! Öfter mal die Freunde wechseln, das bringt Schwung in die Landschaft.

    Gruß, Don P

    1. Lieber Don P,

      <naiv-tun>das war jetzt aber nicht politisch gemeint, oder doch?</naiv-tun>

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
  4. Haha ... netter Thread der sich da entwickelt hat :)

    Die Lösung von Felix Riesterer war wonach ich gesucht habe!

    Werde dann übrigens auch die Farben von good-Green bis bad-Black/Yellow entsprechend "nachvollziebar" benennen ;)

    Vielen Dank und Gruß
    Gruß Norman