Această postare descrie funcționarea și utilizarea proprietății „backgroundImage” stil DOM HTML.
Cum să utilizați proprietatea „backgroundImage” în stilul HTML DOM în JavaScript?
Stilul HTML DOM „ imagine de fundal ” este folosită pentru a personaliza elementul HTML și documentul prin adăugarea unei imagini de fundal, referindu-se la calea acestuia.
Sintaxă (setarea proprietății „backgroundImage”)
obiect. stil . imagine de fundal = 'url('URL')|niciunul|inițial|moștenire”Sintaxa de mai sus acceptă următoarele valori ale proprietăților „backgroundImage”:
- url(‘URL’): Specifică locația imaginii de fundal dorite.
- nici unul: Reprezintă valoarea implicită, adică fără imagine de fundal.
- iniţială: Este similar cu valoarea implicită a browserului.
- moşteni: Moștenește proprietatea din elementul părinte.
Sintaxă (adresa URL de returnare a proprietății „backgroundImage”)
obiect. stil . imagine de fundalAceastă sintaxă returnează valoarea șirului care conține adresa URL a imaginii de fundal adăugate.
Să folosim practic sintaxele definite mai sus pentru a explica utilizarea proprietății stil „backgroundImage”.
Exemplul 1: Aplicați proprietatea Style „backgroundImage” pentru a seta imaginea de fundal
Acest exemplu aplică stilul „ imagine de fundal ” pentru a seta imaginea de fundal dorită pentru document prin specificarea URL-ului acestuia.
Cod HTML
Mai întâi, aruncați o privire la codul HTML menționat:
< h2 > Utilizare HTML DOM Stil backgroundImage Proprietate în JavaScript h2 >
< butonul la clic = 'myFunc()' > Click aici buton >
În acest cod:
- „ ” eticheta adaugă subtitlul nivelului 2.
- „
Eticheta „creează un buton care are atașat „ onclick ” eveniment pentru a executa funcția ” myFunc() ” la clic pe butonul.
Cod JavaScript
Apoi, urmați codul JavaScript dat:
< scenariu >funcția myFunc ( ) {
document. corp . stil . imagine de fundal = „url('./html&css/image.jpg')” ;
}
scenariu >
În fragmentul de cod de mai sus:
- Funcția numită „ myFunc() ' este definit.
- În definiția sa, „ stil.fondImagine „proprietatea aplică „ URL ” imagine pe fundalul întregului document.
Ieșire
Rezultatul arată că imaginea de fundal este adăugată întregului document la clic pe butonul.
Exemplul 2: Aplicați proprietatea stil „backgroundImage” pentru a returna adresa URL a imaginii de fundal
„ imagine de fundal ” este, de asemenea, benefică pentru a returna adresa URL a imaginii de fundal. Să vedem practic.
Cod HTML
În primul rând, parcurgeți codul HTML scris:
< h2 > Utilizare HTML DOM Stil backgroundImage Proprietate în JavaScript h2 >< div id = 'myDiv' stil = „înălțime: 500px; lățime: 500px;
chenar: 3px negru solid;background-image:url('./html&css/image.jpg')' > Acest este un div div >
< h4 id = 'demo' > h4 >
În blocul de cod de mai sus:
- „ imagine de fundal ” este utilizată în elementul „” care adaugă o imagine de fundal corespunzătoare adresei URL date.
- „ ” elementul creează un subtitlu gol de nivelul 4 care afișează valoarea returnată (URL) a imaginii de fundal adăugate.
Cod JavaScript
Acum, treceți la codul JavaScript:
< scenariu >
lasă img = document. getElementById ( 'myDiv' ) . stil . imagine de fundal ;
document. getElementById ( 'demo' ) . innerHTML = img ;
scenariu >În acest bloc de cod:
- Declarați variabila „ img ” care folosește „ document.getElementById() ” pentru a accesa elementul „” prin id-ul său „myDiv” și aplică o imagine de fundal prin intermediul „ imagine de fundal ” proprietate.
- Apoi, metoda „document.getElementById()” preia subtitlul gol folosind id-ul „demo” pentru a afișa adresa URL a imaginii de fundal atașate.
Ieșire
Ieșirea afișează adresa URL a imaginii de fundal aplicată elementului „div”.
Concluzie
JavaScript folosește stilul „ imagine de fundal ” proprietate pentru atribuirea imaginii de fundal elementului HTML dorit sau returnarea URL-ului acestuia. Acceptă patru valori de proprietate pentru a seta imaginea de fundal, inclusiv „inițial”, „moștenire”, „URL” și „niciunul”. Cu toate acestea, nu acceptă nicio valoare pentru obținerea adresei URL a imaginii de fundal. Această postare a oferit o scurtă descriere pentru utilizarea proprietății „backgroundImage” în stilul HTML DOM în JavaScript.