JavaScriptis on veebilehti, mis vajavad atraktiivset paigutust, näiteks tumedat tausta, mis tavaliselt liideste jaoks paremini toimivad. Samamoodi võimaldab valge taust lugejatel keskenduda sisule ja seetõttu kasutavad uudisteportaalid või ajaveebid suhteliselt heledat tausta tumeda tekstiga. Sellistel juhtudel muutub JavaScript vormindamiseks ja dokumendikujunduse täiustamiseks väga mugavaks.
Selles artiklis käsitletakse JavaScripti taustpildi muutmise meetodeid.
Kuidas muuta JavaScriptis taustapilti?
Taustapildi muutmiseks JavaScriptis saab kasutada järgmisi lähenemisviise.
- “ taustapilt ' vara aadressil ' DOM ”.
- “ getElementById() ' meetod ja ' taustapilt ' vara aadressil ' lõik ”.
Vaadake käsitletud meetodid ükshaaval läbi!
1. meetod: muutke JavaScriptis taustapilti, kasutades DOM-i atribuuti backgroundImage.
' taustapilt ” atribuut reguleerib määratud elemendi taustapilti. Seda tehnikat saab rakendada, rakendades atribuuti backgroundImage ja määrates taustapildi, leides selle tee argumendina.
Süntaks
Ülaltoodud süntaksis ' URL ” viitab pildi teele.
Vaadake demonstreerimiseks järgmist näidet.
Näide
Selles näites kaasatakse määratud väärtusega nupp ja ' onclick ” sündmus, mis suunab aadressile a
funktsioon nimega backgroundImage():
Nüüd on funktsioon ' taustapilt() ' kuulutatakse välja ja ' document.body.style.backgroundImage ” atribuut pääseb taustpildile juurde, kasutades argumendis määratud pilditeed:
Ülaltoodud teostuse väljund on järgmine:
2. meetod: taustapildi muutmine JavaScriptis, kasutades meetodit getElementById() ja atribuuti backgroundImage lõigul
' getElementById() meetod tagastab määratud väärtusega elemendi ja ' taustapilt ” atribuut, nagu eespool öeldud, tagastab argumendis määratud konkreetse elemendi taustpildi. Seda meetodit saab rakendada määratud värvi kaardistamiseks konkreetse lõigu taustal.
Süntaks
Siin, ' elementID ” viitab elemendi ID-le.
Esitatud kontseptsiooni paremaks mõistmiseks vaadake läbi järgmine näide.
Näide
Esmalt lisage märgendisse
lõik ja määrake sellele konkreetne ID:
Järgmisena looge nupp sündmusega onclick, mis pääseb juurde funktsioonile backgroundImage(), nagu kirjeldatud eelmises meetodis:
Lõpuks deklareerige funktsioon nimega ' taustapilt() ” sarnaselt. Siin pääsete määratletud ID-le juurde, kasutades ' getElementById() ” meetodit ja rakendage sellele määratud taustpilt. Selle tulemuseks on värvi rakendamine lõigu taustal:
Väljund
Oleme koostanud lihtsaima meetodi taustapildi muutmiseks Javascriptis
Järeldus
Taustapildi muutmiseks Javascriptis rakendage ' taustapilt ' vara aadressil ' DOM ' määratud taustpildi rakendamiseks kogu veebilehel funktsiooni abil või konkreetse ID hankimiseks kasutades ' getElementById() 'meetodit ja rakendamist' taustapilt ' vara määratud ' lõik ”. See ajaveeb illustreerib JavaScriptis taustpiltide muutmise meetodeid.