Binabawasan ng post na ito ang pagtatrabaho at paggamit ng HTML DOM Style na 'backgroundImage' na property.
Paano Gamitin ang HTML DOM Style 'backgroundImage' Property sa JavaScript?
Ang istilong HTML DOM ' backgroundImage Ang ” property ay ginagamit upang i-customize ang HTML element at ang dokumento sa pamamagitan ng pagdaragdag ng background na larawan sa pamamagitan ng pagtukoy sa landas nito.
Syntax (Pagtatakda ng 'backgroundImage' Property)
bagay. istilo . backgroundImage = 'url('URL')|wala|inisyal|mana'Sinusuportahan ng syntax sa itaas ang sumusunod na mga value ng property na 'backgroundImage':
- url('URL'): Tinutukoy nito ang lokasyon ng nais na larawan sa background.
- wala: Kinakatawan nito ang default na halaga ibig sabihin, walang larawan sa background.
- inisyal: Ito ay katulad ng default na halaga ng browser.
- magmana: Nagmamana ito ng ari-arian mula sa pangunahing elemento nito.
Syntax (Bumabalik na URL ng 'backgroundImage' Property)
bagay. istilo . backgroundImageIbinabalik ng syntax na ito ang string value na naglalaman ng URL ng idinagdag na larawan sa background.
Gamitin natin ang mga natukoy na syntax sa itaas nang praktikal upang ipaliwanag ang paggamit ng istilong 'backgroundImage' na property.
Halimbawa 1: Ilapat ang Estilo na 'backgroundImage' na Property upang Itakda ang Background na Larawan
Inilalapat ng halimbawang ito ang istilong ' backgroundImage ” property upang itakda ang gustong larawan sa background sa dokumento sa pamamagitan ng pagtukoy sa URL nito.
HTML Code
Una, tingnan ang nakasaad na HTML code:
< h2 > Gamitin HTML DOM Estilo backgroundImage Property sa JavaScript h2 >
< button sa pag-click = 'myFunc()' > Pindutin dito pindutan >
Sa code na ito:
- Ang ' Idinaragdag ng tag na ” ang subheading ng level 2.
- Ang ' Ang 'tag ay gumagawa ng isang button na may kalakip na ' onclick 'kaganapan upang maisagawa ang pagpapaandar' myFunc() ” sa pag-click sa pindutan.
JavaScript Code
Susunod, sundin ang ibinigay na JavaScript code:
< script >function myFunc ( ) {
dokumento. katawan . istilo . backgroundImage = 'url('./html&css/image.jpg')' ;
}
script >
Sa snippet ng code sa itaas:
- Ang function na pinangalanang ' myFunc() ” ay tinukoy.
- Sa kahulugan nito, ang ' style.backgroundImage ' inilalapat ng ari-arian ang tinukoy na ' URL ” larawan sa background ng buong dokumento.
Output
Ang output ay nagpapakita na ang background na imahe ay idinagdag sa buong dokumento sa pag-click sa pindutan.
Halimbawa 2: Ilapat ang Estilo na 'backgroundImage' Property upang Ibalik ang URL ng Background na Larawan
Ang ' backgroundImage ” Ang pag-aari ay kapaki-pakinabang din upang ibalik ang URL ng larawan sa background. Tingnan natin ito nang praktikal.
HTML Code
Una, dumaan sa nakasulat na HTML code:
< h2 > Gamitin HTML DOM Estilo backgroundImage Property sa JavaScript h2 >< div id = 'myDiv' istilo = 'taas: 500px; lapad: 500px;
hangganan: 3px solid black;background-image:url('./html&css/image.jpg')' > Ito ay isang div div >
< h4 id = 'demo' > h4 >
Sa itaas na bloke ng code:
- Ang ' backgroundImage Ginagamit ang ” property sa elementong “” na nagdaragdag ng background na larawan na tumutugma sa ibinigay na URL.
- Ang ' Ang elementong ” ay lumilikha ng walang laman na subheading ng antas 4 na nagpapakita ng ibinalik na halaga(URL) ng idinagdag na larawan sa background.
JavaScript Code
Ngayon, magpatuloy sa JavaScript code:
< script >
hayaan ang img = dokumento. getElementById ( 'myDiv' ) . istilo . backgroundImage ;
dokumento. getElementById ( 'demo' ) . panloobHTML = img ;
script >Sa block ng code na ito:
- Ipahayag ang variable na ' img 'na gumagamit ng' document.getElementById() ” na paraan upang ma-access ang elementong “” sa pamamagitan ng id nitong “myDiv” at naglalapat ng larawan sa background sa pamamagitan ng “ backgroundImage ” ari-arian.
- Susunod, kinukuha ng pamamaraang “document.getElementById()” ang walang laman na subheading gamit ang id nitong “demo” upang ipakita ang URL ng nakadugtong na larawan sa background.
Output
Ipinapakita ng output ang URL ng larawan sa background na inilapat sa elementong 'div'.
Konklusyon
Ginagamit ng JavaScript ang istilong “ backgroundImage ” property para sa pagtatalaga ng larawan sa background sa nais na elemento ng HTML o pagbabalik ng URL nito. Sinusuportahan nito ang apat na value ng property para itakda ang background na larawan kasama ang “initial”, “inherit”, “URL”, at “none”. Gayunpaman, hindi nito sinusuportahan ang anumang halaga para sa pagkuha ng URL ng larawan sa background. Ang post na ito ay nagbigay ng maikling paglalarawan para magamit ang HTML DOM style na 'backgroundImage' na property sa JavaScript.