Tässä artikkelissa kuvataan menetelmiä CSS:n lisäämiseksi JavaScriptillä.
Kuinka lisätä CSS:ää JavaScriptillä?
JavaScriptissä voit lisätä CSS-tyylejä elementtiin muokkaamalla sen tyyliominaisuutta seuraavilla tavoilla tai lähestymistavoilla:
- style Ominaisuus upotettuna tyylinä
- setAttribute() -menetelmä rivin muotoisena tyylinä
- createElement() -menetelmä globaalina tyylinä
Tapa 1: Lisää CSS ja JavaScript käyttämällä 'tyyli'-ominaisuutta
Jos haluat lisätä CSS:n JavaScriptiin, käytä ' tyyli ” omaisuutta. Sitä käytetään elementin sisäisten tyylien käyttämiseen ja muokkaamiseen. Se antaa objektin, joka edustaa elementin rivin tyylejä ja mahdollistaa yksittäisten tyyliominaisuuksien saamisen tai asettamisen.
Syntaksi
CSS-tyylin lisäämiseksi JavaScriptiin käytetään seuraavaa syntaksia ' tyyli ”omaisuus:
elementti. tyyli ;
Täällä, ' elementti ” on viittaus HTML-elementtiin.
Esimerkki
Seuraavassa esimerkissä muotoilemme painikkeita JavaScriptin avulla. Ensin luomme kolme painiketta ja määritämme niille tunnukset, mikä auttaa pääsemään painikeelementteihin muotoilua varten:
< painikkeen tunnus = 'btn2' > Hylätä -painiketta >
< painikkeen tunnus = 'btn3' > Hyväksyä -painiketta >
Ennen muotoilua tulos näyttää tältä:
Tyylitetään nyt nämä painikkeet JavaScriptissä käyttämällä ' tyyli ” omaisuutta. Hanki ensin kaikki painikeelementit niille määritettyjen tunnuksien avulla ' getElementById() 'menetelmä:
sopia = asiakirja. getElementById ( 'btn1' ) ;anna hylätä = asiakirja. getElementById ( 'btn2' ) ;
anna hyväksyä = asiakirja. getElementById ( 'btn3' ) ;
Aseta kaikkien näiden painikkeiden taustavärit ' tyyli ”omaisuus:
olla samaa mieltä. tyyli . taustaväri = 'vihreä' ;hylätä. tyyli . taustaväri = 'punainen' ;
hyväksyä. tyyli . taustaväri = 'keltainen' ;
Kuten näet, painikkeet on muotoiltu onnistuneesti käyttämällä ' tyyli ”omaisuus:
Tapa 2: Lisää CSS ja JavaScript käyttämällä 'setAttribute()' -menetelmää
Jos haluat lisätä CSS-tyyliä JavaScriptiin, käytä ' setAttribute() ”menetelmä. Sitä käytetään määritteen ja sen arvon asettamiseen tai lisäämiseen HTML-elementtiin.
Syntaksi
Seuraavaa syntaksia käytetään ' setAttribute() 'menetelmä:
Esimerkki
Tässä asetamme JavaScriptin painikkeiden eri tyylit käyttämällä ' setAttribute() ”menetelmä. Aseta kaikkien painikkeiden reunasäteeksi ' .5 rem ja tekstin väri Olla samaa mieltä ' ja ' Hylätä ' painikkeet ' valkoinen ”.
hylätä. setAttribute ( 'tyyli' , 'taustaväri: punainen; väri: valkoinen; reunan säde: .5rem;' ) ;
hyväksyä. setAttribute ( 'tyyli' , 'taustaväri: keltainen; reunan säde: .5rem;' ) ;
Lähtö
Tapa 3: Lisää CSS JavaScriptillä käyttämällä 'createElement()' -menetelmää
Jos haluat luoda luokkia tai tunnuksia JavaScript-tyylillä kuten CSS-tyylissä, käytä ' createElement() ”menetelmä. Sitä käytetään uuden elementin luomiseen dynaamisesti. Luo muotoilua varten ' tyyli ”-elementti tällä menetelmällä. ' createElement('tyyli') ” -menetelmää JavaScriptissä käytetään luomaan dynaamisesti uusi tyylielementti, jolla voidaan lisätä CSS-tyylejä verkkosivulle.
Syntaksi
Annettua syntaksia käytetään ' createElement() 'menetelmä:
CSS-tyylin lisäämiseksi JavaScriptiin käytä annettua syntaksia:
konst tyyli = asiakirja. CreateElement ( 'tyyli' ) ;Liitä sitten tyylielementti head-tunnisteeseen käyttämällä alla olevaa syntaksia:
asiakirja. pää . liitä lapsi ( tyyli ) ;Täällä, ' tyyli ' on viittaus äskettäin luotuun tyylielementtiin ja ' document.head ” on HTML-dokumentin head-elementti.
Esimerkki
Luo ensin tyylielementti käyttämällä ' createElement() 'menetelmä:
Luo nyt ' btn ”luokka saman tyylin käyttämiseen kaikissa painikkeissa ja tunnisteissa” btn1 ”, “ btn2 ' ja ' btn3 ” yksilölliseen painikkeen muotoiluun:
tyyli. innerHTML = `. btn {
fontti - koko : 1.1 rem ;
pehmuste : 3px ;
marginaali : 2px ;
fontti - perhe : ilman - serif ;
rajaa - säde : .5 rem ;
}
#btn1 {
tausta - väri : vihreä ;
väri : valkoinen ;
}
#btn2 {
tausta - väri : punainen ;
väri : valkoinen ;
}
#btn3 {
tausta - väri : keltainen ;
}
` ;
Liitä nyt tyylielementti asiakirjan päähän välittämällä parametrina ' appendChild() 'menetelmä:
asiakirja. pää . liitä lapsi ( tyyli ) ; Lähtö
Siinä on kyse CSS:n lisäämisestä JavaScriptiin.
Johtopäätös
Jos haluat lisätä CSS:n JavaScriptin kanssa, käytä sisäistä tyyliä, mukaan lukien ' tyyli 'Kiinteistö ja' setAttribute() -menetelmää tai yleistä tyyliä käyttämällä createElement() ”menetelmä. Yleinen tyyli on tehokkaampaa, kun taas inline-menetelmää ei suositella, koska se vaikeuttaa sovellustyylien ylläpitämistä ja voi johtaa koodin toistoon. Tässä artikkelissa kuvattiin menetelmiä CSS:n lisäämiseksi JavaScriptillä.