Antworten auf deine Fragen:
Neues Thema erstellen

Hintegrundfarbe eines div per Javascript wechseln

sv_photo

professioneller Autodidakt

Hallo, ich möchte, dass der User meiner Website bei bestimmten div containern per Mausklck die Hintergrundfabre des beteffenden dic Containers ändern kann. Soweit bekomme ich den Farbwechsel auch hin nur leider nicht auf einen bestimmten Container, sondern für den gesamten body. Kann mir vielleicht jemand helfen und sagen was ich an meinem Code ändern muss um die Änderungen auf den div mit der class "demo" zu beschränken.

Danke für Eure Hilfe:

Code:
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <style type="text/css">
    body {
      background-color: rgb(225,225,225);
    }
  </style>
  <script type="text/javascript">
    var currColor;
    function changeColor(colorName) {
      document.body.style.backgroundColor = colorName;
      currColor = colorName;
    }
    function previewColor(colorName) {
      currColor = document.body.style.backgroundColor;
      document.body.style.backgroundColor = colorName;
    }
    function oldColor() {
       document.body.style.backgroundColor = currColor;
    }
  </script>
  </head>
  <div class="row demo">
      <input type="image" src="buttons/01_red.png" width="50" name="red" value="rot" onClick="changeColor('#ff0000');" onMouseOver="previewColor('#ff0000');" onMouseOut="oldColor();">
      <input type="image" src="buttons/02_orange.png" width="50" name="red" value="rot" onClick="changeColor('#f15a24');" onMouseOver="previewColor('#f15a24');" onMouseOut="oldColor();">
      <input type="image" src="buttons/03_orange.png" width="50" name="red" value="rot" onClick="changeColor('#f7931e');" onMouseOver="previewColor('#f7931e');" onMouseOut="oldColor();">
      <input type="image" src="buttons/04_yellow.png" width="50" name="red" value="rot" onClick="changeColor('#fcee21');"
  </div>
</html>
 

G

Gelöschtes Mitglied 633957

Guest

Falls einen die Liste mit Eigenschaften und Methoden erschreckt, ist ein direktes Beispiel vielleicht hilfreich.
HTML:
<!DOCTYPE html>
<html>
  <head>
    <style>
      #color1, #color2 {
        width: 500px;
        min-height: 150px;
      }
      #color1 {
        background-color: green;
      }
      #color2 {
        background-color: yellow;
      }
    </style>
  </head>
  <body>

    <div id="color1">
      ICH BIN EIN GR&Uuml;NER CONTAINER!
      <br><br>
      <button type="button" onClick="changeColor('orange', 'color2');">gelb zu orange</button>
    </div>

    <div id="color2">
      ICH BIN EIN GELBER CONTAINER!
      <br><br>
      <button type="button" onClick="changeColor('red', 'color1');">gr&uuml;n zu rot</button>
    </div>

  </body>
      <script>
      function changeColor(color, container) {
        document.getElementById(container).style.backgroundColor = color;
      }
    </script>
</html>
 

sv_photo

professioneller Autodidakt

Danke für Eure Antworten,

die Lösung von Tynick sieht sehr gut aus... Kanst Du mir vielleicht sagen, was ich an meinem CODE ändenr muss das nur die classe oder ggf. die id "demo" angesprochen wird?

Code:
body {
      background-color: rgb(225,225,225);

Wenn ich nur "body" ersetzte funktioniert es leider nicht. Steck in der Javascript Materie nicht so tief drin...

Kann ich die classe oder id in diesem string ansprechen?:

Code:
document.body.style.backgroundColor


Danke
 

buerzel

Versuch macht kluch!

Teammitglied
Hier für deinen Code z.B.:
Code:
document.getElementById("colorDIV").style.backgroundColor
.
.
<div id="colorDIV" class="row demo">

EDIT: Code korrigiert.
 
Zuletzt bearbeitet:

sv_photo

professioneller Autodidakt

Danke buerzel, ich raffs aber leider nicht... Ich werde mir wohl ersteinmal ein paar Grundlagen zum Javascript zulegen und dann durch starten...

Danke für Eure Hilfe!
 

buerzel

Versuch macht kluch!

Teammitglied
Was ist da nicht zu raffen?
Im style tag bleibt body stehen. Nur In den Funktionen wird er durch getElementById ersetzt (und zwar alle body).
Die id (von mir colorDIV genannt) ist ein beliebiger, von dir vergebener, Name.

EDIT: Funktionsname korrigiert.
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

Was ist da nicht zu raffen?
getElementsByID

Vielleicht rafft er es nicht weil es bei ihm nicht funktioniert. Schließlich bringst du nun zum zweiten Mal eine falsche, in JS nichtexistente Funktion.
Die Funktionen querySelector und querySelectorAll sind für so ein Problem auch hilfreich. Für so ein simples Beispiel wohl nicht zwingend notwendig, aber spätestens wenn es erweitert werden soll gut zu gebrauchen.

Ansonsten kann ich @sv_photo nur zustimmen, sich Grundlagen anzueignen ist hier wirklich anzuraten.
Dann kann man für dieses Problem auch eine saubere Lösung ohne onclick="" entwickeln.
 

buerzel

Versuch macht kluch!

Teammitglied
Schließlich bringst du nun zum zweiten Mal eine falsche, in JS nichtexistente Funktion.
Oh, sorry - klar, muss natürlich getElementById heißen. Liegt auch daran, dass ich nicht mehr so in der Materie vertieft bin. Hatte das vorgestern ausprobiert und es lief.

PS: Aber: Ist halt wie dazumal in der Schule. „Abschreiben” war noch nie ein guter Ratgeber. :D
 
Zuletzt bearbeitet:
G

Gelöschtes Mitglied 633957

Guest

das nur die classe oder ggf. die id "demo" angesprochen wird
Hier einmal Schritt für Schritt an Deinem geposteten Code. (Das der letzte <input> Tag nicht geschlossen ist, darüber sehen wir jetzt hinweg!)

Eine ID mit dem Namen "demo" gibt es in Deinem Code bis jetzt noch nicht. Da es aber bereits eine "demo" Klasse, wohl für CSS Anweisungen gibt, denken wir uns schnell eine neue ID aus um nicht durcheinander zu kommen. Ich denke, wir nehmen die von @buerzel vorgeschlagene ID "colorDIV". (Es gibt andere Wege Deinen Container zu identifizieren, doch in diesem Beispiel beiben wir bei einer ID, was auch nicht verkehrt ist.)

Um Javascript beizubringen welcher Container manipuliert werden soll, geben wir Deinem DIV Element jetzt die ID. Dazu änderst Du Deine Zeile 25, von:
Code:
<div class="row demo">
in:
Code:
<div id="colorDIV" class="row demo">

Mit diesem super Identifikationsmerkmal müssen wir nur noch dem Skript erzählen, dass es aufhören soll den Seitenhintergrund zu ändern und dafür lieber das Element mit unserer tollen, neuen ID nehmen soll.
D.h., raus mit dem Wort "body" und dafür rein mit einer JS Funktion namens "getElementById()". Und da wir die ID ja bereits kennen, können wir sie auch gleich mit angeben. Also:

In den Zeilen 13, 17, 18 und 21 löschen wir das Wort "body" und setzen dafür ein:
Code:
getElementById('colorDIV')
Dann sehen die Zeilen in etwa so aus:
Code:
document.getElementById('colorDIV').style.backgroundColor = colorName;
(In diesem Fall wäre es übrigens egal ob einzelne oder doppelte Anzührungszeichen verwendet werden.)

Nun sollte alles das was sich vorher farblich im Seitenhintergrund abgespielt hat, sich auf das DIV Element mit der ID "colorDIV" beschränken.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben