Mit html und css durch einen button Hintergrundfarbe ändern?
Hallo,
ich mache gerade eine Website und möchte da einen Knopf, mit dem ich die Hintergrundfarbe und die Schriftfarbe der Website ändern kann. Ich habe bereits einen Button designet, weiß aber nicht, wie ich mit ihm Befehle ausführen kann.
Vielen Dank schonmal im voraus!
Hier ist der html-text für den Button:
<main>
<button class="bonbon orange">hier drücken zum ändern der Hintergrundfarbe</buton>
</main>
und hier ist der css-text für den Button:
main{
background: white
}
.bonbon{
width.: 250px;
height: 60px;
backgorund: orange;
/* old browsers */
background: linear-gradient(to bottom, white, orange);
box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;
border: 1px solid #5ea617;
border-radius: 1em;
marign: 1em
}
.bonbon:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.bonbon:focus {
box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px
}
2 Antworten
Zuvor eine Anmerkung zu deinen gezeigten Code-Ausschnitten: Du hast in ihnen mehrere Rechtschreibfehler eingebaut, die du erst beheben solltest.
- buton > button
- backgorund > background
- marign > margin
- ändern > Ändern
Zur Änderung der Hintergrundfarbe:
1) Lege einen neuen CSS-Klassenselektor an, der die Hintergrundfarbe und die Schriftart definiert. Ich nehme für das Beispiel die Farbe Rot und Courier als Schriftfamilie.
.new-theme {
background: red;
font-family: Courier, serif;
}
2) Erstelle einen neuen script-Tag kurz vor dem schließenden body und gib dem button-Element am besten eine ID:
<button class="bonbon orange" id="change-background-button">
3) Ordne dem click-Event des Buttons einen Event Listener zu. In diesem kannst du nun dem body-Element den Klassenselektor zuordnen.
document.getElementById("change-background-button").addEventListener("click", function() {
document.body.classList.add("new-theme");
});
Genaueres zu den hier verwendeten Funktionen kannst du auf MDN nachlesen.
Beachte, dass CSS Properties nicht immer automatisch weitervererbt werden. So würde sich die Schriftart des Buttons beispielsweise erst mit ändern, wenn du explizit angibst, dass sie vom Elternelement geerbt werden soll:
.bonbon {
font-family: inherit;
/* ... */
}
html:
<main>
<button class="bonbon orange">hier drücken zum Ändern der Hintergrundfarbe</button>
<bonbon orange id="change-background-button">
</main>
CSS:
main{
background: white
}
.bonbon{
width.: 250px;
height: 60px;
background: orange;
/* old browsers */
background: linear-gradient(to bottom, white, orange);
box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;
border: 1px solid #5ea617;
border-radius: 1em;
margin: 1em
}
.bonbon:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.bonbon:focus {
box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px
}
.new-theme {
background: black;
font-family: Courier, serif;
}
document.getElementById("change-background-button").addEventListener("click", function() {
document.body.classList.add("new-theme");
})
Demo: https://jsfiddle.net/xz73n0ko/ -> funktioniert, wie erwartet.
mmh, okay. ich schaue mal. Wie bekommt man den weißen Strich auf der Höhe des Buttons weg? Also dass auch da der Hintergrund die Farbe ändert?
Das ist die Hintergrundfarbe, die du dem main-Element explizit zugewiesen hast.
Aber eine letzte Frage habe ich noch XD,
wie kann ich einen zweiten Button machen, der genauso aussieht, den Hintergrund aber wieder weiß macht?
LG
Ich habe das alles so eingegeben, aber es funktioniert immer noch nicht. Ich schicke mal Bilder, es wäre nett, wenn du nochmal drüber schauen könntest. :-)