JavaScriptissä on verkkosivuja, jotka tarvitsevat houkuttelevan asettelun, kuten tummat taustat, jotka toimivat yleensä paremmin käyttöliittymissä. Vastaavasti valkoiset taustat antavat lukijan keskittyä sisältöön, joten uutisportaalit tai blogit käyttävät suhteellisen vaaleaa taustaa tummalla tekstillä. Tällaisissa tapauksissa JavaScriptistä tulee erittäin kätevä muotoilu ja dokumenttien suunnittelun parantaminen.
Tässä artikkelissa käsitellään tapoja muuttaa taustakuvaa JavaScriptissä.
Kuinka muuttaa taustakuvaa JavaScriptissä?
Taustakuvan vaihtamiseen JavaScriptissä voidaan käyttää seuraavia tapoja:
- ' taustakuva ' kiinteistö ' DOM ”.
- ' getElementById() 'menetelmä ja' taustakuva ' kiinteistö ' kohta ”.
Käy läpi käsitellyt menetelmät yksitellen!
Tapa 1: Vaihda taustakuvaa JavaScriptissä DOM:n backgroundImage-ominaisuuden avulla.
' taustakuva ”-ominaisuus säätää määritetyn elementin taustakuvaa. Tätä tekniikkaa voidaan soveltaa käyttämällä backgroundImage-ominaisuutta ja määrittämällä taustakuva etsimällä sen polku argumenttina.
Syntaksi
Yllä olevassa syntaksissa ' URL-osoite ” viittaa kuvan polkuun.
Katso seuraava esimerkki esittelyä varten.
Esimerkki
Tässä esimerkissä painike sisältää määritetyn arvon ja ' klikkaamalla ”tapahtuma uudelleenohjaa osoitteeseen a
funktio nimeltä backgroundImage():
Nyt toiminto ' taustakuva() ” julistetaan ja ” document.body.style.backgroundImage ”-ominaisuus käyttää taustakuvaa käyttämällä argumentissaan määritettyä kuvapolkua:
Yllä olevan toteutuksen tulos on seuraava:
Tapa 2: Muuta taustakuvaa JavaScriptissä käyttämällä getElementById()-menetelmää ja kappaleen backgroundImage-ominaisuutta
' getElementById() ' -menetelmä palauttaa elementin, jolla on määritetty arvo ja ' taustakuva ”-ominaisuus, kuten yllä todettiin, palauttaa argumentissa määritetyn tietyn elementin taustakuvan. Tätä menetelmää voidaan käyttää määrittämään määritetty väri tietyn kappaleen taustalle.
Syntaksi
Täällä, ' elementtejä ” viittaa elementin id:ään.
Käy läpi seuraava esimerkki ymmärtääksesi paremmin esitetyn käsitteen.
Esimerkki
Sisällytä ensin kappale
-tunnisteeseen ja määritä sille tietty tunnus:
Luo seuraavaksi painike onclick-tapahtumalla, joka käyttää funktiota backgroundImage(), kuten edellisessä menetelmässä käsiteltiin:
Ilmoita lopuksi funktio nimeltä ' taustakuva() ' samoin. Täältä pääset määritettyyn tunnukseen käyttämällä ' getElementById() ” -menetelmää ja käytä siihen määritettyä taustakuvaa. Tämä johtaa värin käyttöönotossa kappaleen taustalla:
Lähtö
Olemme koonneet helpoimman tavan vaihtaa taustakuvaa Javascriptissä
Johtopäätös
Vaihda taustakuvaa Javascriptissä käyttämällä ' taustakuva ' kiinteistö ' DOM ' määritetyn taustakuvan käyttämiseksi koko verkkosivulle funktion avulla tai tietyn tunnuksen hankkimiseksi käyttämällä ' getElementById() 'menetelmä ja soveltaminen' taustakuva 'kiinteistö määritetyllä' kohta ”. Tämä blogi havainnollistaa tapoja muuttaa taustakuvia JavaScriptissä.