В этой статье будут описаны методы добавления CSS с помощью JavaScript.
Как добавить CSS с помощью JavaScript?
В JavaScript вы можете добавить стили CSS к элементу, изменив его свойство стиля, используя следующие методы или подходы:
- Свойство style как встроенный стиль
- Метод setAttribute() как встроенный стиль
- Метод createElement() как глобальный стиль
Способ 1: добавьте CSS с помощью JavaScript, используя свойство «стиль»
Для добавления CSS в JavaScript используйте « стиль ' свойство. Он используется для доступа и управления встроенными стилями элемента. Он предоставляет объект, представляющий встроенные стили элемента, и позволяет получить или установить индивидуальные свойства стиля.
Синтаксис
Для добавления стиля CSS в JavaScript используется следующий синтаксис для « стиль ' свойство:
элемент. стиль ;
Здесь, ' элемент ” — это ссылка на HTML-элемент.
Пример
В следующем примере мы будем стилизовать кнопки с помощью JavaScript. Во-первых, мы создадим три кнопки и назначим им идентификаторы, что поможет получить доступ к элементам кнопки для стилизации:
< идентификатор кнопки '=' 'бтн2' > Отклонять кнопка >
< идентификатор кнопки '=' 'бтн3' > Принимать кнопка >
Перед стилем вывод будет выглядеть так:
Теперь давайте стилизуем эти кнопки в JavaScript, используя « стиль ' свойство. Во-первых, получите все элементы кнопки, используя назначенные им идентификаторы с помощью « получитьэлемент по идентификатору() метод:
позвольте согласиться '=' документ. получитьэлементбиид ( 'бтн1' ) ;позвольте отвергнуть '=' документ. получитьэлементбиид ( 'бтн2' ) ;
позвольте принять '=' документ. получитьэлементбиид ( 'бтн3' ) ;
Установите цвет фона всех этих кнопок с помощью кнопки « стиль ' свойство:
соглашаться. стиль . фоновый цвет '=' 'зеленый' ;отклонять. стиль . фоновый цвет '=' 'красный' ;
принимать. стиль . фоновый цвет '=' 'желтый' ;
Как видите, кнопки были успешно оформлены с использованием « стиль ' свойство:
Способ 2: добавьте CSS с помощью JavaScript, используя метод «setAttribute()»
Чтобы добавить стили CSS в JavaScript, используйте « установить атрибут () метод. Он используется для установки или добавления атрибута и его значения к элементу HTML.
Синтаксис
Следующий синтаксис используется для « установить атрибут () метод:
Пример
Здесь мы установим различные стили для кнопок в JavaScript, используя « установить атрибут () метод. Установите радиус границы всех кнопок на « .5рем ', и цвет текста ' Соглашаться ' и ' Отклонять ” кнопки на “ белый ».
отклонять. setAttribute ( 'стиль' , 'цвет фона: красный; цвет: белый; радиус границы: .5rem;' ) ;
принимать. setAttribute ( 'стиль' , 'цвет фона: желтый; радиус границы: .5rem;' ) ;
Выход
Способ 3: добавьте CSS с помощью JavaScript, используя метод «createElement()»
Если вы хотите создать классы или идентификаторы в стиле JavaScript, как в стиле CSS, используйте « создатьЭлемент() метод. Он используется для динамического создания нового элемента. Для укладки создайте « стиль ” с помощью этого метода. “ создатьЭлемент('стиль') ” в JavaScript используется для динамического создания нового элемента стиля, который можно использовать для добавления стилей CSS на веб-страницу.
Синтаксис
Данный синтаксис используется для « создатьЭлемент() метод:
Для добавления стиля CSS в JavaScript используйте данный синтаксис:
константа стиль '=' документ. создатьЭлемент ( 'стиль' ) ;Затем добавьте элемент стиля в тег заголовка, используя следующий синтаксис:
документ. голова . appendChild ( стиль ) ;Здесь, ' стиль ” является ссылкой на вновь созданный элемент стиля, а “ документ.голова ” — это головной элемент HTML-документа.
Пример
Сначала создайте элемент стиля, используя « создатьЭлемент() метод:
Теперь создайте « бтн » класс для применения одного и того же стиля ко всем кнопкам и идентификаторам» бтн1 », « бтн2 ' и ' бтн3 » для индивидуального стиля кнопок:
стиль. внутреннийHTML '=' `. бтн {
шрифт - размер : 1.1бэр ;
набивка : 3 пикселя ;
допуск : 2 пикселя ;
шрифт - семья : без - с засечками ;
граница - радиус : .5рем ;
}
#бтн1 {
фон - цвет : зеленый ;
цвет : белый ;
}
#бтн2 {
фон - цвет : красный ;
цвет : белый ;
}
#бтн3 {
фон - цвет : желтый ;
}
` ;
Теперь добавьте элемент стиля к заголовку документа, передав в качестве параметра « добавить дочерний элемент () метод:
документ. голова . appendChild ( стиль ) ; Выход
Это все о добавлении CSS в JavaScript.
Заключение
Для добавления CSS с JavaScript используйте встроенный стиль, включая « стиль «Имущество» и « установить атрибут () », или глобальный стиль с использованием « создатьЭлемент() метод. Глобальный стиль более эффективен, в то время как встроенный метод не рекомендуется, поскольку он затрудняет поддержку стилей приложения и может привести к повторению кода. В этой статье описаны методы добавления CSS с помощью JavaScript.