Как через js изменить css

Стилизация с помощью CSS классов на JavaScript

В предыдущем уроке мы с вами научились менять CSS стили элементов через изменение атрибута style. Чаще всего это не очень хорошая идея. Дело в том, что, если раскидать CSS стили по JavaScript коду, в дальнейшем будет проблематично изменить дизайн сайта, так как придется ковырять JavaScript код в поисках зашитых туда стилей.

Более удобно для дальнейшей поддержки будет добавлять или убирать элементу CSS классы, тем самым стилизуя их нужным образом.

Давайте посмотрим на примере. Пусть у нас есть несколько абзацев:

Давайте сделаем так, чтобы по клику на любой абзац, этот абзац красился в какой-нибудь цвет, например, в зеленый. Для этого в CSS файле сделаем специальный класс для окрашивания абзацев:

Преимущество использование класса в том, что теперь легко можно будет поменять желаемый цвет — для этого нужно будет просто внести изменение в CSS файл, не ковыряя JavaScript код. Особенно удобно это будет в том случае, если JavaScript код пишете вы, а в дальнейшем стилизовать его будет кто-то другой (возможно менее квалифицированный человек, умеющий работать только с CSS).

Итак, теперь, после введения класса, по клику на любой абзац можно изменить его цвет, просто добавив ему наш класс:

Объясните, почему я выбрал для названия класса слово colored , а не слово green , явно указывающее на желаемый нами цвет.

Дан абзац. Даны кнопки ‘перечеркнуть’ , ‘сделать жирным’ , ‘сделать красным’ . Пусть по нажатию на каждую кнопку заданное действие происходит с абзацем (становится красным, например).

Дополнительное преимущество

Использование классов вместо изменения стилей напрямую имеет еще одно преимущество. Легким движением руки можно сделать так, что стили элементов будут чередоваться.

Например, можно сделать так, что при первом клике на абзац он будет красится в определенный цвет, а при повторном клике — возвращать себе исходный цвет. Для этого нужно просто метод add поменять на метод toggle :

Модифицируйте предыдущую задачу так, чтобы повторное нажатие на кнопку отменяло действие этой кнопки.

DOM — Изменение CSS

HTML DOM позволяет JavaScript изменять стиль HTML элементов.

document.getElementById(id).style.свойство = новый стиль

В следующем примере изменяется стиль элемента <p>:

Использование событий

HTML DOM позволяет выполнять код при возникновении какого-либо события.

События генерируются браузером, когда с HTML элементом "что-то происходит":

  • на элемент кликнули мышкой
  • страница полностью загрузилась
  • поле ввода было изменено

Подробнее о событиях вы узнаете в следующей главе этого учебника.

В следующем примере изменяется стиль HTML элемента с id="id1", когда пользователь нажимает на кнопку:

Как изменить стили элемента с помощью свойства Element.style в JavaScript

Как изменить стили элемента с помощью свойства Element.style в JavaScript

Свойство Element.style в JavaScript , как правило, используется только для чтения. Оно возвращает объект CSSStyleDeclaration — массив CSS -стилей элемента, а также пары ( key: value ) всех его стилей. Все они доступны для чтения и изменения.

Но задавать стили напрямую с помощью этого свойства — плохая практика.

Установить напрямую отдельные стили с помощью свойства Element.style и JavaScript можно, используя CamelCase .

Несмотря на то, что большинство современных браузеров позволяют это делать, такой подход тоже не рекомендуется.

Как правильно использовать Element.style в JavaScript

В таком случае как изменить Element.style ? Лучшим вариантом является использование свойства Element.style.cssText , которое работает как Element.className , но для инлайновых стилей. Его можно применять в качестве геттера или сеттера.

В первом случае он позволяет получить все инлайновые стили элемента в формате строки. Во втором — заменит все текущие стили элемента на указанные в Element.style.cssText . Они также задаются в строковом формате.

Если задача состоит не в полной замене стилей, а добавлении дополнительных или замене одного конкретного стиля, то и это cssText позволяет легко реализовать через свойство Element.style и JavaScript .

При наличии у элемента стилей, прописанных в CSS обычным способом, инлайновые, конечно, их «затрут».

Такой способ отлично подойдет для динамичного управления стилями элемента, например, при определенных действиях пользователя. Это позволит придать интерфейсу динамики.

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

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