Sa JavaScript, may mga web page na nangangailangan ng kaakit-akit na layout, gaya ng madilim na background na karaniwang mas gumagana para sa mga interface. Katulad nito, ang mga puting background ay nagbibigay-daan sa mga mambabasa na tumuon sa nilalaman, kaya ang mga portal ng balita o blog ay gumagamit ng medyo maliwanag na background na may madilim na teksto. Sa ganitong mga kaso, ang JavaScript ay nagiging napakadaling gamitin sa pag-format at pagpapabuti ng disenyo ng dokumento.
Tatalakayin ng artikulong ito ang mga paraan upang baguhin ang larawan sa background sa JavaScript.
Paano Baguhin ang Background na Larawan sa JavaScript?
Upang baguhin ang larawan sa background sa JavaScript, maaaring gamitin ang mga sumusunod na diskarte:
- “ backgroundImage ' ari-arian sa ' DOM ”.
- “ getElementById() 'paraan at' backgroundImage ' ari-arian sa ' talata ”.
Isa-isahin ang mga tinalakay na pamamaraan!
Paraan 1: Baguhin ang Background Image sa JavaScript Gamit ang backgroundImage property sa DOM.
Ang ' backgroundImage ' inaayos ng property ang background na imahe ng tinukoy na elemento. Maaaring ilapat ang diskarteng ito sa pamamagitan ng paglalapat ng backgroundImage property at pagtukoy sa background na larawan sa pamamagitan ng paghahanap ng landas nito bilang argumento.
Syntax
Sa syntax sa itaas, ' URL ” ay tumutukoy sa landas ng larawan.
Tingnan ang sumusunod na halimbawa para sa pagpapakita.
Halimbawa
Sa halimbawang ito, ang isang button ay isasama sa tinukoy na halaga at isang ' onclick ” kaganapang nagre-redirect sa a
function na pinangalanang backgroundImage():
Ngayon, isang function ' backgroundImage() 'ay idedeklara at ang' document.body.style.backgroundImage 'Maa-access ng property ang larawan sa background gamit ang tinukoy na path ng imahe sa argumento nito:
Ang output ng pagpapatupad sa itaas ay magreresulta tulad ng sumusunod:
Paraan 2: Baguhin ang Background na Larawan sa JavaScript Gamit ang getElementById() method at backgroundImage property sa talata
Ang ' getElementById() Ang paraan ng ” ay nagbabalik ng isang elemento na may tinukoy na halaga at ang “ backgroundImage ” property, gaya ng nakasaad sa itaas, ay nagbabalik ng background na imahe ng partikular na elementong tinukoy sa argumento nito. Maaaring ilapat ang paraang ito upang i-map ang tinukoy na kulay sa background ng partikular na talata.
Syntax
Dito,' mga elemento ” ay tumutukoy sa id ng isang elemento.
Dumaan sa sumusunod na halimbawa para sa isang mas mahusay na pag-unawa sa nakasaad na konsepto.
Halimbawa
Una, isama ang isang talata sa
tag at italaga ito ng isang partikular na id:
Susunod, lumikha ng isang button na may onclick na kaganapan na nag-a-access sa function na backgroundImage() tulad ng tinalakay sa nakaraang pamamaraan:
Panghuli, ipahayag ang function na pinangalanang ' backgroundImage() ” katulad nito. Dito, i-access ang tinukoy na Id gamit ang ' getElementById() ” paraan at ilapat ang tinukoy na larawan sa background dito. Magreresulta ito sa pagpapatupad ng kulay sa background ng talata:
Output
Inipon namin ang pinakamadaling paraan para sa pagpapalit ng larawan sa background sa Javascript
Konklusyon
Upang baguhin ang larawan sa background sa Javascript, ilapat ang “ backgroundImage ' ari-arian sa ' DOM ' para sa paglalapat ng tinukoy na larawan sa background sa buong web page gamit ang isang function o sa pamamagitan ng pagkuha ng partikular na id gamit ang ' getElementById() 'paraan at paglalapat' backgroundImage ” ari-arian sa tinukoy na “ talata ”. Ang blog na ito ay naglalarawan ng mga paraan upang baguhin ang mga larawan sa background sa JavaScript.