Mjchael: Background-Color per JavaScript verändern

Ich habe folgendes Problem:

Ich habe eine Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../css/style.css" />
</head>
<body>
...

in der externen CSS steht
body{
   background-color:#003C81;
}

Zum Testen der Wirkung verschiedener Hintergrundfarben würde ich die Hintergrundfarbe gerne per Java-Script und A-Tag ändern. Leider funktioniert dieses bei mir nicht.

Ich habe schon mit und ohne Funktionen gearbeitet, und alle mir bekannten Variante ausprobiert, die Hintergrundfarbe zu ändern
z.B.
document.bgColor=#000fff;
document.body.style.bgcolor=#000fff;

und zig andere Varianten habe ich schon ausprobiert.

dabei hätte ich sehr gerne solch einen Link:

<a href="#" style="background-color: #000FFF;"
onklick="document.body.style.color=#000FFF;>
Farbbeispiel: #000FFF
</a>

Doch das funktioniert leider nicht.

Gruß Mjchael

  1. Moin
    versuch mal
    document.getElementsByTagName("body")[0]style.backgroundColor='#000FFF;'

    Gruß
    rfb

    1. Moin
      versuch mal
      document.getElementsByTagName("body")[0]style.backgroundColor='#000FFF;'

      Gruß
      rfb

      Hallo!
      Schau dir mal das an: http://de.selfhtml.org/javascript/sprache/objekte.htm#eigene

      --
      ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}
      1. Moin

        Schau dir mal das an: http://de.selfhtml.org/javascript/sprache/objekte.htm#eigene

        Das funktioniert nicht, wenn die HG-Farbe durch CSS festgelegt ist (Einschränkung: jedenfalls nicht in meinem Opera ;-)

        Gruß
        rfb

  2. Hello out there!

    und zig andere Varianten habe ich schon ausprobiert.

    2 Stunden ausprobieren können Ihnen 10 Minuten Handbuchlesen sparen. [Linda]

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  3. Es funktioniert nicht, weil Dir praktisch alle Grundlagen fehlen, um ein derartiges Problem zu lösen. Trotzdem: mit einem ähnlichen Hintergrund hat hier wohl (fast) jeder angefangen.

    Eine andere Lösung wäre

    <a href="javascript:void(0)" onclick="document.body.style.background='blue'">Blau</a>

    Mfg Blau

    1. Verwirrt den Mjchael doch nicht so mit Tausenden von Antworten und Links :). Das Problem war doch lediglich, dass er einen literalen Wert ohne Anführungsstriche zuweisen wollte.

      Also nicht

      ... = #FFFFFF (was soll das bitte für ein Datentyp sein!?)

      sondern

      ... = '#FFFFFF'

      Die richtige Antwort kam auch schon von rfb.

      Außerdem kann's glaub ich Probleme geben, wenn man direkt im Link mit dem document-Objekt rummacht, da muss man den Krempel in eine Funktion kapseln. Bei onclick isses aber glaub' ich nicht so gefährlich ;).

      Mirko

      1. Hi,

        Verwirrt den Mjchael doch nicht so mit Tausenden von Antworten und Links :). Das Problem war doch lediglich, dass er einen literalen Wert ohne Anführungsstriche zuweisen wollte.

        Du meinst also, daß das falsch geschriebene event-handler-Attribut und die nichtexistente bgcolor-Eigenschaft des style-Objekts egal sind?

        Außerdem kann's glaub ich Probleme geben, wenn man direkt im Link mit dem document-Objekt rummacht, da muss man den Krempel in eine Funktion kapseln.

        Wie kommst Du auf sowas?

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hallo,

          Du meinst also, daß das falsch geschriebene event-handler-Attribut und die nichtexistente bgcolor-Eigenschaft des style-Objekts egal sind?

          Huch, Asche auf mein Haupt :) ! Ich äh... hatte mich eben nur auf die syntaktischen Fehler konzentriert und vor allem nur ganz unten geguckt (dieses ganze Vorgeplänkel war doch überflüssig :). Trotzdem ist Mjchael mit meinem etwas voreiligen Tipp, nur rfbs Post zu lesen, ja nicht schlecht beraten :).

          Außerdem kann's glaub ich Probleme geben, wenn man direkt im Link mit dem document-Objekt rummacht, da muss man den Krempel in eine Funktion kapseln.

          Wie kommst Du auf sowas?

          Hier, versuch's selbst. Beim Klick auf den ungekapselten Aufruf geht das Dokument flöten:

          <a href="javascript:function x() {document.body.style.background='#f0f'} x()">gekapselt</a> <br>

          <a href="javascript:document.body.style.background='#f0f'">ungekapselt</a> <br>

          <a href="#" onclick="document.body.style.background='#f0f'">onlick</a>

          Bei onlick aber wie gesagt unproblematisch.

          Mirko

  4. Die Lösung habe ich nach einigen Versuchen herausgefunden.

    <a href="#" style="background-color:#333399; color:#FFFFFF;" onclick="document.body.style.backgroundColor='#333399';"> 333399 </a>

    Ein paar Varianten, die Ihr mir vorgestellt habt, habe ich auch schon ausprobiert gehabt. Mit und ohne Anführungszeichen und noch einiges mehr.

    Warum ein paar nicht funktioniert haben weiß ich nicht.
    Danke auf alle fälle für euere Hilfe!
    Gruß Mjchael