Немного отойдем от изучения powershell и добавим JavaScript. Сегодня мы научимся менять CSS на странице для создания интерактивных страниц. JavaScript позволяет создавать анимации на сайтах, но сегодня мы поговорим о работе с css.
JavaScript — меняем css элементов
Для того, чтобы начать работать со стилями css нам необходимо обратиться к самим стилям. Через JS это можно сделать так:
|
1 |
document.getElementById('example').style |
Посмотреть работу по изменению css можно посмотреть выполнив наш тест.
Мы обращаемся сначала к объектной модели document. Далее пытаемся найти элемент на странице через getElementById, который имеет id=example. И после этого обращается к style.
Таким образом можно поменять любое свойство. Фон, ширину, высоту, цвет, шрифт и другие. Давайте рассмотрим несколько примеров.
В первом случае рассмотрим изменение ширины для блока с id = info:
|
1 |
document.getElementById('teach').style.width = 300px; |
В целом все весьма просто. Но как сделать изменение динамичным? Для этого занесем выражение в функцию:
|
1 2 3 |
function changeWidth() { document.getElementById('info').style.width = 300px; } |
Теперь это функцию необходимо вызвать на странице. Чтобы это сделать необходимо создать простую кнопку и прикрутить к ней свойство onClick, с помощью которой функция будет вызвана:
|
1 |
<button type="submit" onclick='changeWidth()'">Поменять ширину</button> |
В целом это все, что необходимо для изменения ширины блока.
Сложный пример.
Сейчас рассмотрим ситуацию, когда мы хотим выполнить задачу по изменению стилей с помощью пользовательского ввода. Например, мы хотим, чтобы пользователь ввел цвет для текста. Для этого создадим новую функцию, которая будет выглядеть так:
|
1 2 3 |
function changeColor(userInput) { document.getElementById('example').style.color = userInput; } |
То есть при изменении свойства color, в этот раз будет подставляться значение аргумента, который поступит в функцию. Теперь нам необходимо создать поле ввода на странице, где пользователь будет сам вводить название цвета:
|
1 |
<input type="text" id="userInput"> |
Далее создадим кнопку в которую будем передавать значение введенное пользователем. В отличии от примера с прошлой кнопкой, сейчас мы будем передавать значение пользователя в функцию, проведя получение этого значения прямо в конструкции onClick:
|
1 |
<button type="submit" onclick='return changeColor(getElementById('userInput').value)'">Поменять цвет</button> |
Обратите внимание на то, что мы передаем в качестве аргумента не всю информацию об элементе userInput, а именно value, то есть значение внутри этого элемента. Весь код страницы будет выглядеть так:
|
1 2 3 4 5 6 7 8 9 |
<h2 id="example">Этот текст поменяется после нажатия на кнопку</h2> <script> function changeColor(userInput) { document.getElementById('example').style.color = userInput; } </script> <input type="text" id="userInput"> <button type="submit" onclick='return changeColor(getElementById("userInput").value)'>Поменять цвет</button> |
Посмотреть работу всей страницы можно тут.
Итог
Как видите с помощью javascript можно менять любые свойства css и делать страницы интерактивными, позволяя пользователю с ними взаимодействовать. У меня на это все, надеюсь я помог вам разобраться в некоторых вопросах, а если они все еще остались — пишите их в комментариях! Подписывайтесь на нашу группу в контакте, канал на ютубе и канал в телеграме!