Sales1 min read137 words

Laten we een kleine applicatie ontwikkelen die eenvoudig de achtergrond verandert met JavaScript

Emir Eskici

Emir Eskici

PlusClouds Author

Cloud & SaaS

Hoe de achtergrondkleur te wijzigen met JavaScript

Achtergrond Wisselaar met JavaScript

Hallo, in deze blog zal ik jullie een applicatie laten zien die, zoals in andere blogs, klein is maar waar je verbeteringen op kunt aanbrengen. Laten we deze vrij eenvoudige en leuke applicatie bekijken met behulp van de Achtergrond Wisselaar in JavaScript (Verander de Achtergrondkleur in JavaScript)

wordpress6.2_Banner.jpg

Voor andere projecten/applicaties (zie: Blog)

HTML

Laten we eerst de HTML-kant aanpakken door een aantal knoppen te maken die de kleurkeuzes aanbieden en deze knoppen de onClick-functie te geven.
Description

JS

Laten we de onClick-functies die we aan de knoppen in onze HTML-code hebben gegeven, definiëren.

function green(){
    document.getElementById("ColorBody").style.backgroundColor="green"
}
// Ik heb simpelweg het element geselecteerd met ID ColorBody en met de stijl (style) achtergrondkleur-backgroundColor de geselecteerde element groen gegeven
function red(){
    document.getElementById("ColorBody").style.backgroundColor="red"
}

function blue(){ document.getElementById("ColorBody").style.backgroundColor="blue" }

function yellow(){ document.getElementById("ColorBody").style.backgroundColor="yellow" }

Resultaat

Description

Frequently Asked Questions

Hoe kan ik met JavaScript de achtergrondkleur veranderen zoals in dit voorbeeld?

Het voorbeeld maakt gebruik van knoppen die onClick-functies aanroepen om de kleur te wijzigen. De functies groen(), rood(), blauw() en geel() wijzigen de achtergrondkleur van het element met het id ColorBody door de stijl van dat element aan te passen naar de gewenste kleur.

Welke JavaScript-functies bestaan er in de code en welke kleuren zetten ze?

De functies groen(), rood(), blauw() en geel() wijzigen elk de achtergrondkleur van ColorBody. Ze zetten de achtergrondkleur op groen, rood, blauw of geel.

Welk HTML-element wordt doelwit door de kleurwijzigingen?

Het element met het id ColorBody wordt doelwit van de kleurwijzigingen. De functies selecteren dit element en passen de achtergrondkleur aan.

Hoe verbind je de kleurknoppen in HTML met de juiste JavaScript-functies?

In de HTML worden knoppen gemaakt die een onClick-functie toewijzen, zodat bij klikken de juiste functie wordt aangeroepen. Voorbeelden in het script zijn groen(), rood(), blauw() en geel().

Welke kleuren kun je zien veranderen in dit voorbeeld en waar worden ze toegepast?

De beschikbare kleuren in het voorbeeld zijn groen, rood, blauw en geel. Ze worden toegepast op het element ColorBody via de achtergrondkleur.

Is er een externe link genoemd voor extra informatie over achtergrondkleur veranderen in JavaScript?

Ja, er is een link naar DelftStack met de titel Verander de Achtergrondkleur in JavaScript.

Wat laat het gedeelte Resultaat zien na het kiezen van een kleur?

Het Resultaat-gedeelte toont een afbeelding van het effect (een gif) zodat je ziet hoe de achtergrondkleur wijzigt. Dit geeft een visueel voorbeeld van wat er gebeurt nadat je een kleur kiest.

Laten we een kleine applicatie ontwikkel… | PlusClouds Blog