Dit bericht beschrijft de werking en het gebruik van de eigenschap 'backgroundImage' in HTML DOM-stijl.
Hoe HTML DOM-stijl 'backgroundImage' -eigenschap in JavaScript te gebruiken?
De HTML DOM-stijl “ achtergrond afbeelding ” eigenschap wordt gebruikt om het HTML-element en het document aan te passen door een achtergrondafbeelding toe te voegen door te verwijzen naar het pad.
Syntaxis (de eigenschap 'backgroundImage' instellen)
voorwerp. stijl . achtergrond afbeelding = 'url('URL')|geen|initieel|erven'De bovenstaande syntaxis ondersteunt de volgende eigenschapswaarden 'backgroundImage':
- url(‘URL’): Het specificeert de locatie van de gewenste achtergrondafbeelding.
- geen: Het vertegenwoordigt de standaardwaarde, d.w.z. geen achtergrondafbeelding.
- voorletter: Het is vergelijkbaar met de standaardwaarde van de browser.
- erven: Het erft de eigenschap van het bovenliggende element.
Syntaxis (terugkerende URL van de eigenschap 'backgroundImage')
voorwerp. stijl . achtergrond afbeeldingDeze syntaxis retourneert de tekenreekswaarde die de URL van de toegevoegde achtergrondafbeelding bevat.
Laten we de hierboven gedefinieerde syntaxis praktisch gebruiken om het gebruik van de stijleigenschap 'backgroundImage' uit te leggen.
Voorbeeld 1: pas de eigenschap Style “backgroundImage” toe om de achtergrondafbeelding in te stellen
In dit voorbeeld wordt de stijl ' achtergrond afbeelding ” eigenschap om de gewenste achtergrondafbeelding voor het document in te stellen door de URL op te geven.
HTML code
Bekijk eerst de vermelde HTML-code:
< h2 > Gebruik HTML DOM Stijl backgroundImage-eigenschap in JavaScript h2 >
< knop opklik = 'mijnFunc()' > Klik hier knop >
In deze code:
- De ' ” tag voegt de subkop van niveau 2 toe.
- De '
” tag creëert een knop met een bijgevoegde “ bij klikken 'gebeurtenis om de functie uit te voeren' mijnFunc() ” bij het klikken op de knop.
JavaScript-code
Volg vervolgens de gegeven JavaScript-code:
< script >functie myFunc ( ) {
document. lichaam . stijl . achtergrond afbeelding = 'url('./html&css/afbeelding.jpg')' ;
}
script >
In het bovenstaande codefragment:
- De functie met de naam ' mijnFunc() ' is gedefinieerd.
- In zijn definitie, de ' style.backgroundImage ” eigendom past de gespecificeerde “ URL ” afbeelding naar de achtergrond van het hele document.
Uitgang
De uitvoer laat zien dat de achtergrondafbeelding wordt toegevoegd aan het hele document na een klik op de knop.
Voorbeeld 2: pas de eigenschap Style 'backgroundImage' toe om de URL van de achtergrondafbeelding te retourneren
De ' achtergrond afbeelding ” eigenschap is ook nuttig om de URL van de achtergrondafbeelding te retourneren. Laten we het praktisch bekijken.
HTML code
Ga eerst door de geschreven HTML-code:
< h2 > Gebruik HTML DOM Stijl backgroundImage-eigenschap in JavaScript h2 >< div. id = 'mijnDiv' stijl = 'hoogte: 500px; breedte: 500px;
border: 3px effen zwart;background-image:url('./html&css/image.jpg')' > Dit is een div div >
< h4 tel = 'demonstratie' > h4 >
In het bovenstaande codeblok:
- De ' achtergrond afbeelding ” eigenschap wordt gebruikt in het “” element dat een achtergrondafbeelding toevoegt die overeenkomt met de gegeven URL.
- De ' ”-element maakt een lege subkop van niveau 4 die de geretourneerde waarde (URL) van de toegevoegde achtergrondafbeelding weergeeft.
JavaScript-code
Ga nu verder met de JavaScript-code:
< script >
laat img = document. getElementById ( 'mijnDiv' ) . stijl . achtergrond afbeelding ;
document. getElementById ( 'demonstratie' ) . binnenHTML = img ;
script >In dit codeblok:
- Declareer de variabele ' img ” dat gebruik maakt van de “ document.getElementById() ” methode om toegang te krijgen tot het “” element via zijn id “myDiv” en past een achtergrondafbeelding toe via de “ achtergrond afbeelding ' eigendom.
- Vervolgens haalt de methode 'document.getElementById()' de lege subkop op met behulp van de id 'demo' om de URL van de toegevoegde achtergrondafbeelding weer te geven.
Uitgang
De uitvoer geeft de URL weer van de achtergrondafbeelding die is toegepast op het 'div' -element.
Conclusie
JavaScript gebruikt de stijl ' achtergrond afbeelding ”-eigenschap voor het toewijzen van de achtergrondafbeelding aan het gewenste HTML-element of het retourneren van de URL. Het ondersteunt vier eigenschapswaarden om de achtergrondafbeelding in te stellen, waaronder 'initial', 'inherit', 'URL' en 'none'. Het ondersteunt echter geen enkele waarde voor het verkrijgen van de URL van de achtergrondafbeelding. Dit bericht gaf een korte beschrijving van het gebruik van de eigenschap 'backgroundImage' in HTML DOM-stijl in JavaScript.