JavaScript - Меняем CSS

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

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

document.getElementById('example').style

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

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

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

document.getElementById('teach').style.width = 300px;
В целом все весьма просто. Но как сделать изменение динамичным? Для этого занесем выражение в функцию:

function changeWidth() {
document.getElementById('info').style.width = 300px;
}
Теперь это функцию необходимо вызвать на странице. Чтобы это сделать необходимо создать простую кнопку и прикрутить к ней свойство onclick, с помощью которой функция будет вызвана:


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


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

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


function changeColor(userInput) {
document.getElementById('example').style.color = userInput;
}

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




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



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

Этот текст поменяется после нажатия на кнопку