JavaScript Hintergrundfarbe von div ändern?
Kann mir bitte jemand sagen wie ich mit JavaScript die Farbe des Hintergrundes von einem div ändere?
Ich habe es schon mal versucht mit
document.getElementsByClassName("div").style.backgroundColor = "red"
zu ändern, aber es funktioniert nicht.
Wie mache ich das?
2 Antworten
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>
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>
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.
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.
https://jsfiddle.net/u73c1sjv/
mal mit allen 4 möglichkeiten. einfach die reihenfolge unten ändern, dann ändert sich auch die farbe des divs (immer die farbe der letzten zuweisung)
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.