Работа с CSS в JavaScript

21 просмотров Время на прочтение: 3 минут(ы)

Пример 1

Для установки CSS стиля элементу HTML в JavaScript нужно использовать конструкцию “el.style.svoistvo = znachenie”, где “el” – элемент HTML, “svoistvo” – свойство стиля, “znachenie” – значение свойства. Если название свойства стиля состоит из двух и более слов через дефис, то дефис не пишется, а второе и следующие слова начинаются с большой буквы.

Данный пример можно записать короче, применив конструкцию “with”:

Пример 2

Изначально текст красный и фон – зелёный. При нажатии на кнопку “Другой цвет” текст становится зелёным, а фон – красным.

В данном примере свойство “className” позволяет задать новый CSS класс HTML элементу.

Пример 3

При нажатии на кнопку “Красный текст” текст становится красным, а фон – зелёным. При нажатии на кнопку “Зелёный текст” текст становится зелёным, а фон – красным.

В данном примере для удаления CSS класса у HTML элемента используется конструкция “el.classList.remove(c)”, а для добавления CSS класса HTML элементу – “el.classList.add(c)”; где “el” – элемент, а “c” – класс.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

©2024 Шигорин Сергей Владимирович
Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Top.Mail.Ru
Каталог сайтов Всего.ру
Белый каталог сайтов PopCat.ru