Овај чланак ће описати методе за додавање ЦСС-а помоћу ЈаваСцрипт-а.
Како додати ЦСС помоћу ЈаваСцрипт-а?
У ЈаваСцрипт-у можете додати ЦСС стилове елементу тако што ћете модификовати његово својство стила користећи следеће методе или приступе:
- стиле Својство као уграђени стил
- сетАттрибуте() Метод као уграђени стил
- цреатеЕлемент() Метод као глобални стил
Метод 1: Додајте ЦСС помоћу ЈаваСцрипт-а користећи својство „стиле“.
За додавање ЦСС-а у ЈаваСцрипт, користите „ стил ' имовина. Користи се за приступ и манипулисање уграђеним стиловима елемента. Даје објекат који представља уграђене стилове елемента и омогућава да добијете или поставите појединачна својства стила.
Синтакса
За додавање ЦСС стила у ЈаваСцрипт, следећа синтакса се користи за „ стил ' имовина:
елемент. стил ;
Овде, „ елемент ” је референца на ХТМЛ елемент.
Пример
У следећем примеру ћемо стилизовати дугмад користећи ЈаваСцрипт. Прво ћемо креирати три дугмета и доделити им ИД-ове, што помаже да се приступи елементима дугмади за стилизовање:
< дугме ид = 'бтн2' > Одбити дугме >
< дугме ид = 'бтн3' > Прихвати дугме >
Пре стилизовања излаз ће изгледати овако:
Сада, хајде да стилизујемо ове дугмад у ЈаваСцрипт-у користећи „ стил ' имовина. Прво, набавите све елементе дугмади користећи њихове додељене ИД-ове уз помоћ „ гетЕлементБиИд() ” метод:
нека се договоримо = документ. гетЕлементБиИд ( 'бтн1' ) ;нека одбаци = документ. гетЕлементБиИд ( 'бтн2' ) ;
нека прихвати = документ. гетЕлементБиИд ( 'бтн3' ) ;
Подесите боје позадине свих ових дугмади помоћу „ стил ' имовина:
договорити се. стил . боја позадине = 'зелен' ;одбити. стил . боја позадине = 'црвено' ;
прихватити. стил . боја позадине = 'жуто' ;
Као што видите, дугмад су успешно стилизована помоћу „ стил ' имовина:
Метод 2: Додајте ЦСС помоћу ЈаваСцрипт-а помоћу методе „сетАттрибуте()“.
Да бисте додали ЦСС стил у ЈаваСцрипт, користите „ сетАттрибуте() ” метод. Користи се за постављање или додавање атрибута и његове вредности у ХТМЛ елемент.
Синтакса
Следећа синтакса се користи за „ сетАттрибуте() ” метод:
Пример
Овде ћемо поставити различите стилове на дугмад у ЈаваСцрипт-у користећи „ сетАттрибуте() ” метод. Поставите радијус ивице свих дугмади на „ .5рем “ и боју текста „ Договорити се ' и ' Одбити ” дугмад до „ бео ”.
одбити. сетАттрибуте ( 'стил' , 'боја позадине: црвена; боја: бела; радијус ивице: .5рем;' ) ;
прихватити. сетАттрибуте ( 'стил' , 'боја позадине: жута; радијус ивице: .5рем;' ) ;
Излаз
Метод 3: Додајте ЦСС помоћу ЈаваСцрипт-а помоћу методе „цреатеЕлемент()“.
Ако желите да креирате класе или ИД-ове у ЈаваСцрипт стилу као у ЦСС стилу, користите „ цреатеЕлемент() ” метод. Користи се за динамичко креирање новог елемента. За стајлинг направите „ стил ” елемент користећи овај метод. „ цреатеЕлемент('стил') ” метода у ЈаваСцрипт-у се користи за динамичко креирање новог елемента стила, који се може користити за додавање ЦСС стилова на веб страницу.
Синтакса
Дата синтакса се користи за „ цреатеЕлемент() ” метод:
За додавање ЦСС стила у ЈаваСцрипт, користите дату синтаксу:
конст стил = документ. цреатеЕлемент ( 'стил' ) ;Затим додајте елемент стила у ознаку хеад користећи доњу синтаксу:
документ. глава . аппендЦхилд ( стил ) ;Овде, „ стил ” је референца на новокреирани елемент стила, а “ документ.глава ” је главни елемент ХТМЛ документа.
Пример
Прво, креирајте елемент стила користећи „ цреатеЕлемент() ” метод:
Сада креирајте „ бтн ” класа за примену истог стила на сва дугмад и ИД-ове “ бтн1 ”, “ бтн2 ' и ' бтн3 ” за индивидуално обликовање дугмади:
стил. иннерХТМЛ = `. бтн {
фонт - величина : 1.1рем ;
паддинг : 3пк ;
маргина : 2пк ;
фонт - породица : без - сериф ;
граница - радијус : .5рем ;
}
#бтн1 {
позадини - боја : зелен ;
боја : бео ;
}
#бтн2 {
позадини - боја : црвена ;
боја : бео ;
}
#бтн3 {
позадини - боја : жута ;
}
` ;
Сада додајте елемент стила у главу документа тако што ћете проследити као параметар у „ аппендЦхилд() ” метод:
документ. глава . аппендЦхилд ( стил ) ; Излаз
То је све о додавању ЦСС-а у ЈаваСцрипт.
Закључак
За додавање ЦСС-а са ЈаваСцрипт-ом, користите уграђени стил укључујући „ стил “ Имовина и “ сетАттрибуте() ” или глобални стил коришћењем „ цреатеЕлемент() ” метод. Глобални стил је ефикаснији док се инлине метод не препоручује јер отежава одржавање стилова апликације и може довести до понављања кода. Овај чланак описује методе за додавање ЦСС-а помоћу ЈаваСцрипт-а.