Tämä viesti kertoo HTML DOM Style 'backgroundImage' -ominaisuuden toiminnasta ja käytöstä.
Kuinka käyttää HTML DOM Style 'backgroundImage' -ominaisuutta JavaScriptissä?
HTML DOM -tyyli ' taustakuva ” -ominaisuutta käytetään mukauttamaan HTML-elementtiä ja dokumenttia lisäämällä taustakuva viittaamalla sen polkuun.
Syntaksi ('backgroundImage'-ominaisuuden asettaminen)
esine. tyyli . taustakuva = 'url('URL')|none|initial|herit'Yllä oleva syntaksi tukee seuraavia 'backgroundImage'-ominaisuusarvoja:
- url('URL'): Se määrittää halutun taustakuvan sijainnin.
- ei mitään: Se edustaa oletusarvoa, eli ei taustakuvaa.
- alkukirjain: Se on samanlainen kuin selaimen oletusarvo.
- inherit: Se perii ominaisuuden emoelementistään.
Syntaksi ('backgroundImage'-ominaisuuden palauttava URL-osoite)
esine. tyyli . taustakuvaTämä syntaksi palauttaa merkkijonoarvon, joka sisältää lisätyn taustakuvan URL-osoitteen.
Käytämme yllä määriteltyjä syntakseja käytännössä selittämään tyylin 'backgroundImage' käyttöä.
Esimerkki 1: Käytä Style 'backgroundImage' -ominaisuutta asettaaksesi taustakuvan
Tämä esimerkki käyttää tyyliä ' taustakuva ” -ominaisuutta asettaaksesi asiakirjaan halutun taustakuvan määrittämällä sen URL-osoitteen.
HTML-koodi
Katso ensin ilmoitettu HTML-koodi:
< h2 > Käyttää HTML DOM Tyyli backgroundImage-ominaisuus JavaScriptissä h2 >
< painiketta onclick = 'myFunc()' > Klikkaa tästä -painiketta >
Tässä koodissa:
- ' ” -tunniste lisää tason 2 alaotsikon.
- '
' -tunniste luo painikkeen, johon on liitetty ' klikkaamalla 'tapahtuma toiminnon suorittamiseksi' myFunc() ” painiketta napsauttamalla.
JavaScript-koodi
Seuraa seuraavaksi annettua JavaScript-koodia:
< käsikirjoitus >toiminto myFunc ( ) {
asiakirja. kehon . tyyli . taustakuva = 'url('./html&css/image.jpg')' ;
}
käsikirjoitus >
Yllä olevassa koodinpätkässä:
- Funktio nimeltä ' myFunc() ' on määritelty.
- Määritelmässään ' style.backgroundImage '-ominaisuus soveltaa määritettyä' URL-osoite ”-kuvan koko asiakirjan taustalle.
Lähtö
Tulos näyttää, että taustakuva lisätään koko asiakirjaan napin painalluksella.
Esimerkki 2: Käytä Style 'backgroundImage' -ominaisuutta palauttaaksesi taustakuvan URL-osoitteen
' taustakuva ” -ominaisuus on hyödyllinen myös taustakuvan URL-osoitteen palauttamisessa. Katsotaanpa käytännössä.
HTML-koodi
Käy ensin läpi kirjoitettu HTML-koodi:
< h2 > Käyttää HTML DOM Tyyli backgroundImage-ominaisuus JavaScriptissä h2 >< div id = 'myDiv' tyyli = 'korkeus: 500px; leveys: 500px;
reunus: 3px solid black;background-image:url('./html&css/image.jpg')' > Tämä on div div >
< h4 id = 'demo' > h4 >
Yllä olevassa koodilohkossa:
- ' taustakuva '-ominaisuutta käytetään ''-elementissä, joka lisää annettua URL-osoitetta vastaavan taustakuvan.
- ' ”-elementti luo tyhjän tason 4 alaotsikon, joka näyttää lisätyn taustakuvan palautetun arvon (URL-osoitteen).
JavaScript-koodi
Siirry nyt JavaScript-koodiin:
< käsikirjoitus >
anna img = asiakirja. getElementById ( 'myDiv' ) . tyyli . taustakuva ;
asiakirja. getElementById ( 'demo' ) . innerHTML = img ;
käsikirjoitus >Tässä koodilohkossa:
- Ilmoita muuttuja ' img ', joka käyttää ' document.getElementById() ' -menetelmää käyttääksesi '' -elementtiä sen tunnuksen 'myDiv' kautta ja käyttää taustakuvaa ' taustakuva ” omaisuutta.
- Seuraavaksi menetelmä 'document.getElementById()' hakee tyhjän alaotsikon käyttämällä sen tunnuksen 'demo' -tunnusta, joka näyttää liitetyn taustakuvan URL-osoitteen.
Lähtö
Tulos näyttää 'div'-elementtiin lisätyn taustakuvan URL-osoitteen.
Johtopäätös
JavaScript käyttää tyyliä ' taustakuva ”-ominaisuuden taustakuvan määrittämiseksi haluttuun HTML-elementtiin tai sen URL-osoitteen palauttamiseen. Se tukee neljää ominaisuusarvoa taustakuvan asettamiseen, mukaan lukien 'initial', 'herit', 'URL' ja 'none'. Se ei kuitenkaan tue mitään arvoa taustakuvan URL-osoitteen saamiselle. Tämä viesti tarjosi lyhyen kuvauksen HTML DOM -tyylisen 'backgroundImage' -ominaisuuden käyttämisestä JavaScriptissä.