Acest articol va descrie metodele de a adăuga CSS cu JavaScript.
Cum se adaugă CSS cu JavaScript?
În JavaScript, puteți adăuga stiluri CSS la un element modificând proprietatea stilului acestuia folosind următoarele metode sau abordări:
- Style Proprietate ca stil inline
- setAttribute() Metoda ca stil inline
- CreateElement() Metoda ca stil global
Metoda 1: Adăugați CSS cu JavaScript folosind proprietatea „style”.
Pentru a adăuga CSS în JavaScript, utilizați „ stil ” proprietate. Este utilizat pentru a accesa și manipula stilurile inline ale unui element. Oferă un obiect care reprezintă stilurile inline ale unui element și permite obținerea sau setarea proprietăților de stil individuale.
Sintaxă
Pentru adăugarea stilului CSS în JavaScript, următoarea sintaxă este utilizată pentru „ stil ” proprietate:
element. stil ;
Aici, ' element ” este o referire la un element HTML.
Exemplu
În exemplul următor, vom stila butoanele folosind JavaScript. În primul rând, vom crea trei butoane și le vom atribui ID-uri, ceea ce ajută la accesarea elementelor butoanelor pentru stil:
< ID-ul butonului = 'btn2' > Respinge buton >
< ID-ul butonului = 'btn3' > Accept buton >
Înainte de a stiliza rezultatul va arăta astfel:
Acum, să stilăm aceste butoane în JavaScript folosind „ stil ” proprietate. În primul rând, obțineți toate elementele butonului folosind ID-urile atribuite cu ajutorul „ getElementById() ” metoda:
sa fie de acord = document. getElementById ( 'btn1' ) ;lasa sa respinga = document. getElementById ( 'btn2' ) ;
lasa sa accepte = document. getElementById ( 'btn3' ) ;
Setați culorile de fundal ale tuturor acestor butoane folosind butonul „ stil ” proprietate:
de acord. stil . culoare de fundal = 'verde' ;respinge. stil . culoare de fundal = 'roșu' ;
Accept. stil . culoare de fundal = 'galben' ;
După cum puteți vedea, butoanele au fost stilate cu succes folosind „ stil ” proprietate:
Metoda 2: Adăugați CSS cu JavaScript folosind metoda „setAttribute()”.
Pentru a adăuga stilul CSS în JavaScript, utilizați „ setAttribute() ” metoda. Este folosit pentru a seta sau adăuga un atribut și valoarea acestuia la un element HTML.
Sintaxă
Următoarea sintaxă este utilizată pentru „ setAttribute() ” metoda:
Exemplu
Aici, vom seta diferitele stiluri pe butoanele din JavaScript folosind „ setAttribute() ” metoda. Setați raza graniței tuturor butoanelor la „ .5rem ”, și culoarea textului „ De acord ' și ' Respinge butoanele ” la “ alb ”.
respinge. setAttribute ( 'stil' , 'culoare-fond: roșu; culoare: alb; rază-chenar: .5rem;' ) ;
Accept. setAttribute ( 'stil' , 'culoare de fundal: galben; raza de margine: .5rem;' ) ;
Ieșire
Metoda 3: Adăugați CSS cu JavaScript folosind metoda „createElement()”.
Dacă doriți să creați clase sau ID-uri în stilul JavaScript ca și în stilul CSS, utilizați „ createElement() ” metoda. Este utilizat pentru a crea dinamic un nou element. Pentru stil, creați un „ stil ” element folosind această metodă. „ createElement(‘stil’) ” din JavaScript este folosită pentru a crea dinamic un nou element de stil, care poate fi folosit pentru a adăuga stiluri CSS la o pagină web.
Sintaxă
Sintaxa dată este folosită pentru „ createElement() ” metoda:
Pentru a adăuga stil CSS în JavaScript, utilizați sintaxa dată:
const stil = document. createElement ( 'stil' ) ;Apoi adăugați elementul de stil în eticheta head folosind sintaxa de mai jos:
document. cap . appendChild ( stil ) ;Aici, ' stil ” este o referire la elementul de stil nou creat și „ document.cap ” este elementul principal al documentului HTML.
Exemplu
Mai întâi, creați un element de stil folosind „ createElement() ” metoda:
Acum, creați un „ btn ” clasa pentru aplicarea aceluiași stil pe toate butoanele și ID-urile ” btn1 ”, “ btn2 ' și ' btn3 ” pentru stilul individual al nasturii:
stil. innerHTML = `. btn {
font - mărimea : 1,1 rem ;
căptușeală : 3px ;
marginea : 2px ;
font - familie : fără - serif ;
frontieră - rază : .5rem ;
}
#btn1 {
fundal - culoare : verde ;
culoare : alb ;
}
#btn2 {
fundal - culoare : roșu ;
culoare : alb ;
}
#btn3 {
fundal - culoare : galben ;
}
` ;
Acum, adăugați elementul de stil la capul documentului trecând ca parametru la „ appendChild() ” metoda:
document. cap . appendChild ( stil ) ; Ieșire
Asta înseamnă adăugarea CSS în JavaScript.
Concluzie
Pentru a adăuga CSS cu JavaScript, utilizați stilul inline, inclusiv „ stil „Proprietate și „ setAttribute() ” sau stilul global folosind “ createElement() ” metoda. Stilul global este mai eficient, în timp ce o metodă inline nu este recomandată, deoarece face dificilă menținerea stilurilor de aplicare și poate duce la repetarea codului. Acest articol a descris metodele de adăugare a CSS cu JavaScript.