Тази статия ще опише методите за добавяне на CSS с JavaScript.
Как да добавя CSS с JavaScript?
В JavaScript можете да добавите CSS стилове към елемент, като промените свойството му стил, като използвате следните методи или подходи:
- style Свойство като вграден стил
- setAttribute() Метод като вграден стил
- createElement() Метод като глобален стил
Метод 1: Добавете CSS с JavaScript, като използвате свойството „style“.
За да добавите CSS в JavaScript, използвайте „ стил ' Имот. Използва се за достъп и манипулиране на вградените стилове на елемент. Той дава обект, който представлява вградените стилове на елемент и позволява да се получат или зададат индивидуални стилови свойства.
Синтаксис
За добавяне на CSS стил в JavaScript се използва следният синтаксис за „ стил ' Имот:
елемент. стил ;
Тук, ' елемент ” е препратка към HTML елемент.
Пример
В следващия пример ще стилизираме бутоните с помощта на JavaScript. Първо, ще създадем три бутона и ще им присвоим идентификатори, което помага за достъп до елементите на бутоните за стилизиране:
< идентификатор на бутона = 'btn2' > Отхвърляне бутон >
< идентификатор на бутона = 'btn3' > Приеми бутон >
Преди стилизиране изходът ще изглежда така:
Сега нека стилизираме тези бутони в JavaScript с помощта на „ стил ' Имот. Първо вземете всички елементи на бутоните, като използвате присвоените им идентификатори с помощта на „ getElementById() ” метод:
нека се съгласим = документ. getElementById ( 'btn1' ) ;нека отхвърли = документ. getElementById ( 'btn2' ) ;
нека приеме = документ. getElementById ( 'btn3' ) ;
Задайте цветовете на фона на всички тези бутони, като използвате „ стил ' Имот:
Съгласен. стил . Цвят на фона = 'зелен' ;отхвърлям. стил . Цвят на фона = 'червен' ;
приемам. стил . Цвят на фона = 'жълто' ;
Както можете да видите, бутоните са успешно оформени с помощта на „ стил ' Имот:
Метод 2: Добавете CSS с JavaScript с помощта на метода „setAttribute()“.
За да добавите CSS стил в JavaScript, използвайте „ setAttribute() ” метод. Използва се за задаване или добавяне на атрибут и неговата стойност към HTML елемент.
Синтаксис
Следният синтаксис се използва за „ setAttribute() ” метод:
Пример
Тук ще зададем различните стилове на бутоните в JavaScript с помощта на „ setAttribute() ” метод. Задайте радиуса на границата на всички бутони на „ .5rem “, и цвета на текста на „ Съгласен ' и ' Отхвърляне ” бутони към “ бяло ”.
отхвърлям. setAttribute ( 'стил' , 'цвят на фона: червен; цвят: бял; радиус на границата: .5 rem;' ) ;
приемам. setAttribute ( 'стил' , 'цвят на фона: жълт; радиус на границата: .5 rem;' ) ;
Изход
Метод 3: Добавете CSS с JavaScript с помощта на метода „createElement()“.
Ако искате да създадете класове или идентификатори в JavaScript стил като в CSS стила, използвайте „ createElement() ” метод. Използва се за динамично създаване на нов елемент. За стилизиране създайте „ стил ” елемент с помощта на този метод. „ createElement('стил') ” в JavaScript се използва за динамично създаване на нов стилов елемент, който може да се използва за добавяне на CSS стилове към уеб страница.
Синтаксис
Даденият синтаксис се използва за „ createElement() ” метод:
За да добавите CSS стил в JavaScript, използвайте дадения синтаксис:
конст стил = документ. createElement ( 'стил' ) ;След това добавете елемента style в тага head, като използвате синтаксиса по-долу:
документ. глава . appendChild ( стил ) ;Тук, ' стил ” е препратка към новосъздадения стилов елемент, а „ документ.глава ” е основният елемент на HTML документа.
Пример
Първо създайте стилов елемент, като използвате „ createElement() ” метод:
Сега създайте „ btn 'клас за прилагане на един и същ стил върху всички бутони и идентификатори' btn1 ”, “ btn2 ' и ' btn3 ” за индивидуален стил на бутоните:
стил. innerHTML = `. btn {
шрифт - размер : 1.1 rem ;
подплата : 3px ;
марж : 2px ;
шрифт - семейство : без - сериф ;
граница - радиус : .5rem ;
}
#btn1 {
заден план - цвят : зелено ;
цвят : бяло ;
}
#btn2 {
заден план - цвят : червен ;
цвят : бяло ;
}
#btn3 {
заден план - цвят : жълто ;
}
` ;
Сега добавете стиловия елемент към главата на документа, като го предадете като параметър към „ appendChild() ” метод:
документ. глава . appendChild ( стил ) ; Изход
Това е всичко относно добавянето на CSS в JavaScript.
Заключение
За да добавите CSS с JavaScript, използвайте вградения стил, включително „ стил „Имот“ и „ setAttribute() ” или глобалният стил с помощта на „ createElement() ” метод. Глобалният стил е по-ефективен, докато вграденият метод не се препоръчва, тъй като затруднява поддържането на стиловете на приложение и може да доведе до повторение на кода. Тази статия описва методите за добавяне на CSS с JavaScript.