Sådan ændres baggrundsbillede i JavaScript

Sadan Aendres Baggrundsbillede I Javascript



I JavaScript er der websider, der har brug for et attraktivt layout, såsom mørke baggrunde, der normalt fungerer bedre til grænseflader. På samme måde lader hvide baggrunde læserne fokusere på indhold, og derfor bruger nyhedsportalerne eller blogs en forholdsvis lys baggrund med mørk tekst. I sådanne tilfælde bliver JavaScript meget praktisk til at formatere og forbedre dokumentdesign.

Denne artikel vil diskutere metoderne til at ændre baggrundsbilledet i JavaScript.







Hvordan ændres baggrundsbillede i JavaScript?

For at ændre baggrundsbilledet i JavaScript kan følgende fremgangsmåder bruges:



  • baggrundsbillede ' ejendom på ' DOM ”.
  • getElementById() 'metode og ' baggrundsbillede ' ejendom på ' afsnit ”.



Gennemgå de diskuterede metoder én efter én!





Metode 1: Skift baggrundsbillede i JavaScript ved hjælp af egenskaben backgroundImage på DOM.

Det ' baggrundsbillede ” egenskab justerer baggrundsbilledet af det angivne element. Denne teknik kan anvendes ved at anvende egenskaben backgroundImage og angive baggrundsbilledet ved at lokalisere dets sti som et argument.

Syntaks



I ovenstående syntaks, ' URL ” refererer til billedets sti.

Se følgende eksempel for demonstration.

Eksempel

I dette eksempel vil en knap blive inkluderet med den angivne værdi og en ' onclick ” begivenhed, der omdirigerer til en
funktion med navnet backgroundImage():

Nu en funktion ' baggrundsbillede() ' vil blive erklæret, og ' dokument.kropsstil.baggrundsbillede egenskaben vil få adgang til baggrundsbilledet ved hjælp af den angivne billedsti i sit argument:

Outputtet af ovenstående implementering vil resultere som følger:

Metode 2: Skift baggrundsbillede i JavaScript ved hjælp af metoden getElementById() og egenskaben backgroundImage i afsnittet

Det ' getElementById() ' metode returnerer et element med en specificeret værdi og ' baggrundsbillede ” egenskab, som angivet ovenfor, returnerer baggrundsbilledet af det bestemte element, der er angivet i dets argument. Denne metode kan anvendes til at kortlægge den angivne farve på baggrunden af ​​det pågældende afsnit.

Syntaks

Her, ' elementer ' refererer til id'et for et element.

Gennemgå følgende eksempel for en bedre forståelse af det angivne koncept.

Eksempel

Først skal du inkludere et afsnit i

-tagget og tildele det et specifikt id:

Opret derefter en knap med en onclick-hændelse, der får adgang til funktionen backgroundImage() som diskuteret i den foregående metode:

Til sidst skal du erklære funktionen med navnet ' baggrundsbillede() ' på samme måde. Her skal du få adgang til det definerede id ved hjælp af ' getElementById() ”-metoden og anvend det angivne baggrundsbillede på det. Dette vil resultere i implementeringen af ​​farven på afsnittets baggrund:

Produktion

Vi har samlet den nemmeste metode til at ændre baggrundsbillede i Javascript

Konklusion

For at ændre baggrundsbillede i Javascript skal du anvende ' baggrundsbillede ' ejendom på ' DOM ' for at anvende det angivne baggrundsbillede på hele websiden ved hjælp af en funktion eller ved at få det bestemte id ved hjælp af  ' getElementById() ' metode og anvendelse af ' baggrundsbillede ' egenskab på den angivne ' afsnit ”. Denne blog illustrerer metoderne til at ændre baggrundsbilleder i JavaScript.