Здесь можно найти всё что Вам нужно! ⇒

Почта techsupport@web-rubik.ru

Как поменять CSS свойства при нажатии кнопки без перезагрузки страницы

Автор: © barik


Изменить свойства 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 свойств, при нажатии кнопки и без перезагрузки страницы!
На этом у меня всё. Если есть какие-то вопросы, пишите в комментариях!

Понравился материал 4



2 Комментарии КОТОРЫЕ

Сергей

А можно ли этим способом поменять в элементе стили по классу прописанном в CSS стилях? Буду признателен!

© barik

Не только классы, но и любой атрибут. Просто укажите вместо style клас и имя в кавычках :)
({class: "nameClass"})


Оставить комментарий

Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru



←−−−