Как поменять CSS свойства при нажатии кнопки без перезагрузки страницы
Автор: © web-rubik
3400 Просмотры
5 Понравилось
Изменить свойства CSS при нажатии кнопки, да нет ничего проще! Приведу Вам пример с участием javascript, что позволит поменять свойства CSS без перезагрузки страницы. Для этого понадобится подключение к jquery библиотеке и написать небольшой javascript код.
Полный рабочий код, как поменять CSS свойства при нажатии кнопки без перезагрузки страницы:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Изменить свойства CSS при нажатии кнопки</title>
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script>
$(function () {
$("#colorA").click(function () {
$("#content").attr({
style: "width:100px; height:100px; background-color:#F00; color:#00F;"
});
});
});
</script>
<style>
#content{ width:100px; height:100px; background-color:#000; text-align:center; color:#FFF; }
</style>
</head>
<body>
<a id="colorA" type="button" style="text-decoration:none; cursor:pointer;">
<div id="content">Нажми на меня</div>
</a>
</body>
</html>Как видно в вышеуказанном коде – нет ничего проще! Теперь давайте разберёмся, что тут и как тут работает.
У нас есть подключение к библиотеке jquery, блок div с индексом - id="content" и кнопка с индексом id="colorA". В javascript коде мы указали, что при нажатии кнопки с индексом id="colorA" ( $("#colorA").click(function () { ) у нас запускается готовый метод под названием ( attr ) в указанном блоке ( $("#content").attr({ ). Метод attr позволяет поменять CSS свойства в указанном элементе, будь то цвет или путь к картинке.
Таким образом, мы с лёгкостью осуществили изменение CSS свойств, при нажатии кнопки и без перезагрузки страницы!
На этом у меня всё. Если есть какие-то вопросы, пишите в комментариях!
2 Комментарии КОТОРЫЕ
Сергей
А можно ли этим способом поменять в элементе стили по классу прописанном в CSS стилях? Буду признателен!
© web-rubik
Не только классы, но и любой атрибут. Просто укажите вместо style клас и имя в кавычках :)
({class: "nameClass"})
Оставить комментарий
Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru