JavaScript — меняем CSS

JavaScriptНемного отойдем от изучения powershell и добавим JavaScript. Сегодня мы научимся менять CSS на странице для создания интерактивных страниц. JavaScript позволяет создавать анимации на сайтах, но сегодня мы поговорим о работе с css.

JavaScript — меняем css элементов

Для того, чтобы начать работать со стилями css нам необходимо обратиться к самим стилям. Через JS это можно сделать так:

Посмотреть работу по изменению css можно посмотреть выполнив наш тест.

Мы обращаемся сначала к объектной модели document. Далее пытаемся найти элемент на странице через getElementById, который имеет id=example. И после этого обращается к style.

Таким образом можно поменять любое свойство. Фон, ширину, высоту, цвет, шрифт и другие. Давайте рассмотрим несколько примеров.

В первом случае рассмотрим изменение ширины для блока с id = info:

В целом все весьма просто. Но как сделать изменение динамичным? Для этого занесем выражение в функцию:

Теперь это функцию необходимо вызвать на странице. Чтобы это сделать необходимо создать простую кнопку и прикрутить к ней свойство onClick, с помощью которой функция будет вызвана:

В целом это все, что необходимо для изменения ширины блока.

Сложный пример.

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

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

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

Обратите внимание на то, что мы передаем в качестве аргумента не всю информацию об элементе userInput, а именно value, то есть значение внутри этого элемента. Весь код страницы будет выглядеть так:

Посмотреть работу всей страницы можно тут.

Итог

Как видите с помощью javascript можно менять любые свойства css и делать страницы интерактивными, позволяя пользователю с ними взаимодействовать. У меня на это все, надеюсь я помог вам разобраться в некоторых вопросах, а если они все еще остались — пишите их в комментариях! Подписывайтесь на нашу группу в контакте, канал на ютубе и канал в телеграме!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

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