În JavaScript, există pagini web care au nevoie de un aspect atractiv, cum ar fi fundalurile întunecate, care de obicei funcționează mai bine pentru interfețe. În mod similar, fundalurile albe permit cititorilor să se concentreze asupra conținutului, astfel încât portalurile de știri sau blogurile folosesc un fundal relativ deschis cu text întunecat. În astfel de cazuri, JavaScript devine foarte util în formatarea și îmbunătățirea designului documentelor.
Acest articol va discuta metodele de schimbare a imaginii de fundal în JavaScript.
Cum se schimbă imaginea de fundal în JavaScript?
Pentru a schimba imaginea de fundal în JavaScript, pot fi utilizate următoarele abordări:
- „ imagine de fundal ” proprietate pe ” DOM ”.
- „ getElementById() „metoda” și „ imagine de fundal ” proprietate pe ” paragraf ”.
Treceți una câte una prin metodele discutate!
Metoda 1: Schimbați imaginea de fundal în JavaScript Folosind proprietatea backgroundImage pe DOM.
„ imagine de fundal ” proprietatea ajustează imaginea de fundal a elementului specificat. Această tehnică poate fi aplicată prin aplicarea proprietății backgroundImage și specificarea imaginii de fundal prin localizarea căii acesteia ca argument.
Sintaxă
În sintaxa de mai sus, „ URL ” se referă la calea imaginii.
Priviți următorul exemplu pentru demonstrație.
Exemplu
În acest exemplu, un buton va fi inclus cu valoarea specificată și un „ onclick ” redirecționarea evenimentului către a
funcția numită backgroundImage():
Acum, o funcție „ imagine de fundal() ” va fi declarată și „ document.body.style.backgroundImagine ” proprietatea va accesa imaginea de fundal folosind calea imaginii specificată în argumentul său:
Rezultatul implementării de mai sus va rezulta după cum urmează:
Metoda 2: Schimbați imaginea de fundal în JavaScript Folosind metoda getElementById() și proprietatea backgroundImage din paragraf
„ getElementById() ” returnează un element cu o valoare specificată și „ imagine de fundal „, după cum sa menționat mai sus, returnează imaginea de fundal a elementului specific specificat în argumentul său. Această metodă poate fi aplicată pentru a mapa culoarea specificată pe fundalul unui anumit paragraf.
Sintaxă
Aici, ' elemente ” se referă la id-ul unui element.
Parcurgeți următorul exemplu pentru o mai bună înțelegere a conceptului enunțat.
Exemplu
Mai întâi, includeți un paragraf în eticheta
și atribuiți-i un anumit ID:
Apoi, creați un buton cu un eveniment onclick care accesează funcția backgroundImage() așa cum sa discutat în metoda anterioară:
În cele din urmă, declarați funcția numită „ imagine de fundal() ” la fel. Aici, accesați ID-ul definit folosind „ getElementById() ” și aplicați pe ea imaginea de fundal specificată. Acest lucru va duce la implementarea culorii pe fundalul paragrafului:
Ieșire
Am compilat cea mai simplă metodă de schimbare a imaginii de fundal în Javascript
Concluzie
Pentru a schimba imaginea de fundal în Javascript, aplicați „ imagine de fundal ” proprietate pe ” DOM ” pentru aplicarea imaginii de fundal specificate pe întreaga pagină web folosind o funcție sau prin obținerea unui anumit ID folosind “ getElementById() „metoda și aplicarea „ imagine de fundal ” proprietate pe ” specificată paragraf ”. Acest blog ilustrează metodele de schimbare a imaginilor de fundal în JavaScript.