JavaScript Hintergrundfarbe von div ändern?

2 Antworten

document.querySelector("div").stye.backgroundColor = "red";

außer dein html dazu sieht in etwa so aus:

<div class="div"></div>

dann könntest du das element auch über den classname auswählen.

Woher ich das weiß:Studium / Ausbildung – Keine Freunde, keine Hobbys - dafür Computer und Informatik

Mein html sieht so aus wie du es gezeigt hast. Ich habe es ja so versucht, aber mein Chrome sagt mir, dass es die Farbe nicht ändern kann.

0
@HTMLBOI

dann darf man evtl keine tag namen als klassennamen verwenden.

sonst könntest du noch probieren ob

document.querySelector(".div").stye.backgroundColor = "red";

funktioniert.

0
@HTMLBOI

Der Snippet oben würde funktionieren, wenn der Tippfehler (style) behoben werden würde.

0
@regex9

Das ist nur hier ein Tippfehler. Eigentlich habe ich es richtig.

0
@regex9

ups da hast du natürlich recht. gut dass man hier kommentare nur 300s nach dem erstellen ändern kann.

0

Wenn du ein div-Element anhand des Tag-Namens suchst, musst du getElementsByTagName verwenden. Da hierbei eine Liste an gefundenen Elementen zurückkommt (selbst wenn es nur ein div-Element gibt), musst du aus dieser Menge noch das Element wählen, welches du konkret ansprechen möchtest.

In diesem Fall:

document.getElementsByTagName("div")[0].style.backgroundColor = "red";

wäre es das erste gefundene div-Element.

Um gegenüber Markupänderungen allerdings flexibel zu sein, solltest du das Element stattdessen mit einer ID ausstatten und via getElementById suchen. Statt auf das style-Property zuzugreifen, wäre es zudem eleganter, die Hintergrundfarbe in einen Klassenselektor zu definieren und dessen Namen zum class-Attribut hinzuzufügen.

Beispiel:

<style>
.red {
  background-color: red;
}
</style>
<!-- ... -->
<div id="someBox">Some box</div>
<script>
  document.getElementById("someBox").classList.add("red");
</script>

Danke, aber ich brauche es etwas anders. Und zwar habe ich zwei Buttons. Der eine Button macht die div-Box rot, der andere grün.

0
@HTMLBOI

Nun, meine Antwort fokussiert sich natürlich nur auf das, was du in deiner Fragestellung geschrieben hast.

Für dein neues Problem brauchst du nun nur noch zwei Buttons und Klick-Listener:

<!-- define css selectors green and red + div element ... -->
<button class="div-color-changer" value="green">Green</button>
<button class="div-color-changer" value="red">Red</button>
<script>
  var box = document.getElementById("someBox");
  var buttons = document.getElementsByClassName("div-color-changer");

  for (let i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener("click", function() {
      removeClasses(box);
      box.classList.add(this.value);
    });
  }

  function removeClasses(element) {
    var classList = element.classList;

    while (classList.length > 0) {
      classList.remove(classList.item(0));
    }
  }
</script>
0

Was möchtest Du wissen?