Šajā ziņā ir aprakstīta HTML DOM stila rekvizīta “backgroundImage” darbība un lietošana.
Kā izmantot HTML DOM stila 'backgroundImage' rekvizītu JavaScript?
HTML DOM stils ' fona attēls Rekvizīts tiek izmantots, lai pielāgotu HTML elementu un dokumentu, pievienojot fona attēlu, atsaucoties uz tā ceļu.
Sintakse (rekvizīta “backgroundImage” iestatīšana)
objektu. stils . fona attēls = 'url('URL')|nav|sākotnējais|mantot'Iepriekš minētā sintakse atbalsta šādas rekvizītu “backgroundImage” vērtības:
- url('URL'): Tas norāda vajadzīgā fona attēla atrašanās vietu.
- neviens: Tas apzīmē noklusējuma vērtību, t.i., bez fona attēla.
- iniciālis: Tā ir līdzīga pārlūkprogrammas noklusējuma vērtībai.
- mantot: Tas manto īpašumu no sava vecākelementa.
Sintakse (rekvizīta “backgroundImage” atgriešanas URL)
objektu. stils . fona attēlsŠī sintakse atgriež virknes vērtību, kas satur pievienotā fona attēla URL.
Praktiski izmantosim iepriekš definētās sintakses, lai izskaidrotu stila “backgroundImage” rekvizīta izmantošanu.
1. piemērs. Lai iestatītu fona attēlu, izmantojiet rekvizītu Style 'backgroundImage'.
Šis piemērs attiecas uz stilu ' fona attēls ” rekvizītu, lai iestatītu dokumentam vajadzīgo fona attēlu, norādot tā URL.
HTML kods
Vispirms apskatiet norādīto HTML kodu:
< h2 > Izmantot HTML DOM Stils backgroundImage īpašums JavaScript h2 >
< pogu onclick = 'myFunc()' > Noklikšķiniet šeit pogu >
Šajā kodā:
- ' ” tags pievieno 2. līmeņa apakšvirsrakstu.
- '
' tags izveido pogu ar pievienotu ' onclick 'notikums, lai izpildītu funkciju' myFunc() ” noklikšķinot uz pogas.
JavaScript kods
Pēc tam izpildiet norādīto JavaScript kodu:
< skripts >funkcija myFunc ( ) {
dokumentu. ķermeni . stils . fona attēls = 'url('./html&css/image.jpg')' ;
}
skripts >
Iepriekš minētajā koda fragmentā:
- Funkcija ar nosaukumu ' myFunc() ” ir definēts.
- Savā definīcijā ' style.backgroundAttēls ' īpašums attiecas uz norādīto ' URL ” attēlu uz visa dokumenta fona.
Izvade
Izvade parāda, ka fona attēls tiek pievienots visam dokumentam, noklikšķinot uz pogas.
2. piemērs: izmantojiet stila “backgroundImage” rekvizītu, lai atgrieztu fona attēla URL
' fona attēls Īpašums ir izdevīgs arī, lai atgrieztu fona attēla URL. Apskatīsim to praktiski.
HTML kods
Vispirms izlasiet rakstīto HTML kodu:
< h2 > Izmantot HTML DOM Stils backgroundImage īpašums JavaScript h2 >< div id = 'myDiv' stils = 'augstums: 500 pikseļi; platums: 500 pikseļi;
apmale: 3 pikseļi, melns;fona attēls:url('./html&css/image.jpg')' > Šis ir div div >
< h4 id = 'demo' > h4 >
Iepriekš minētajā koda blokā:
- ' fona attēls ” rekvizīts tiek izmantots elementā “”, kas pievieno fona attēlu, kas atbilst norādītajam URL.
- ' ” elements izveido tukšu 4. līmeņa apakšvirsrakstu, kas parāda pievienotā fona attēla atgriezto vērtību (URL).
JavaScript kods
Tagad pārejiet uz JavaScript kodu:
< skripts >
ļaujiet img = dokumentu. getElementById ( 'myDiv' ) . stils . fona attēls ;
dokumentu. getElementById ( 'demo' ) . innerHTML = img ;
skripts >Šajā koda blokā:
- Deklarē mainīgo ' img ', kas izmanto ' document.getElementById() ” metodi, lai piekļūtu elementam “”, izmantojot tā ID “myDiv”, un lietotu fona attēlu, izmantojot “ fona attēls ” īpašums.
- Pēc tam metode “document.getElementById()” ienes tukšo apakšvirsrakstu, izmantojot tās id “demo”, lai parādītu pievienotā fona attēla URL.
Izvade
Izvadā tiek parādīts elementam “div” lietotā fona attēla URL.
Secinājums
JavaScript izmanto stilu ' fona attēls ” rekvizītu, lai vēlamajam HTML elementam piešķirtu fona attēlu vai atgrieztu tā URL. Tā atbalsta četras rekvizītu vērtības, lai iestatītu fona attēlu, tostarp “initial”, “herit”, “URL” un “none”. Tomēr tas neatbalsta nekādu vērtību fona attēla URL iegūšanai. Šajā ziņojumā tika sniegts īss apraksts, lai izmantotu HTML DOM stila rekvizītu “backgroundImage” programmā JavaScript.