Как поменять CSS свойства при нажатии кнопки без перезагрузки страницы
Автор: © web-rubik
2181 Просмотры
4 Понравилось
Изменить свойства 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