In JavaScript zijn er webpagina's die een aantrekkelijke lay-out nodig hebben, zoals donkere achtergronden die meestal beter werken voor interfaces. Evenzo laten witte achtergronden de lezers zich concentreren op inhoud, en dus gebruiken de nieuwsportalen of blogs een relatief lichte achtergrond met donkere tekst. In dergelijke gevallen wordt JavaScript erg handig bij het opmaken en verbeteren van het documentontwerp.
In dit artikel worden de methoden besproken om de achtergrondafbeelding in JavaScript te wijzigen.
Hoe de achtergrondafbeelding in JavaScript te veranderen?
Om de achtergrondafbeelding in JavaScript te wijzigen, kunnen de volgende benaderingen worden gebruikt:
- “ achtergrond afbeelding ” eigendom op “ DOM ”.
- “ getElementById() ” methode en “ achtergrond afbeelding ” eigendom op “ paragraaf ”.
Doorloop de besproken methoden één voor één!
Methode 1: Achtergrondafbeelding wijzigen in JavaScript met behulp van de eigenschap backgroundImage op DOM.
De ' achtergrond afbeelding ” eigenschap past de achtergrondafbeelding van het opgegeven element aan. Deze techniek kan worden toegepast door de eigenschap backgroundImage toe te passen en de achtergrondafbeelding op te geven door het pad als argument te zoeken.
Syntaxis
In de bovenstaande syntaxis, ' URL ” verwijst naar het pad van de afbeelding.
Kijk naar het volgende voorbeeld voor demonstratie.
Voorbeeld
In dit voorbeeld wordt een knop opgenomen met de opgegeven waarde en een ' bij klikken ” gebeurtenis wordt omgeleid naar a
functie met de naam backgroundImage():
Nu een functie “ achtergrond afbeelding() ” wordt verklaard en de “ document.body.style.backgroundImage ” krijgt toegang tot de achtergrondafbeelding met behulp van het opgegeven afbeeldingspad in zijn argument:
De output van de bovenstaande implementatie zal als volgt resulteren:
Methode 2: Achtergrondafbeelding wijzigen in JavaScript met de methode getElementById() en de eigenschap backgroundImage in alinea
De ' getElementById() ” methode retourneert een element met een gespecificeerde waarde en de “ achtergrond afbeelding ” eigenschap, zoals hierboven vermeld, retourneert de achtergrondafbeelding van het specifieke element dat is opgegeven in zijn argument. Deze methode kan worden toegepast om de opgegeven kleur op de achtergrond van de betreffende alinea toe te wijzen.
Syntaxis
Hier, ' elementen ” verwijst naar de id van een element.
Doorloop het volgende voorbeeld voor een beter begrip van het genoemde concept.
Voorbeeld
Voeg eerst een alinea toe aan de
-tag en wijs deze een specifieke id toe:
Maak vervolgens een knop met een onclick-gebeurtenis die toegang heeft tot de functie backgroundImage() zoals besproken in de vorige methode:
Verklaar ten slotte de functie met de naam ' achtergrond afbeelding() ” op dezelfde manier. Ga hier naar de gedefinieerde id met behulp van de ' getElementById() ”-methode en pas de opgegeven achtergrondafbeelding erop toe. Dit zal resulteren in de implementatie van de kleur op de achtergrond van de alinea:
Uitgang:
We hebben de eenvoudigste methode samengesteld om de achtergrondafbeelding in Javascript te wijzigen
Conclusie
Om de achtergrondafbeelding in Javascript te wijzigen, past u de ' achtergrond afbeelding ” eigendom op “ DOM ” voor het toepassen van de gespecificeerde achtergrondafbeelding op de hele webpagina met behulp van een functie of door de specifieke id op te halen met “ getElementById() ” methode en toepassing “ achtergrond afbeelding ” eigendom op de opgegeven “ paragraaf ”. Deze blog illustreert de methoden om achtergrondafbeeldingen in JavaScript te wijzigen.