Все для создания и продвижения сайтов

Верстка, программирование, SEO

Добавление и удаление класса в Jquery

количество просмотров
Добавление и удаление класса в Jquery

Для добавления классов к элементу в jquery есть функция addClass(), работа её очень простая, рассмотрим на примере:

Добавление класса

$("#block").addClass("class");	
$(".block").addClass("class");

Мы к элементу block добавляем класс class. Мы можем добавлять классы, как по id, так и по классу.

Есть возможность добавлять сразу несколько классов:

$("#block").addClass("class1 class2");

Рассмотрим пример. Создадим белый блок с чёрной рамкой и добавим к нему класс, который окрасит его в красный цвет.

<html>
<head>
<style>
	#block{
		width: 50px;
		height: 50px;
		border: 1px solid #000;
	}
	
	.red{
		background-color: red;
	}
</style>
</head>
<body>
	
<script src="js/jquery.min.js"></script> </body> </html>

Удаление класса

Для удаления класса в jquery есть функция removeClass, которая работает аналогично с классом выше, рассмотрим на примере:

$("#block").removeClass("class");	
$(".block").removeClass("class");

Удаляем классы у элемента block, также можно удалять несколько классов:

$("#block").removeClass("class1 class2");	

Есть возможность удалить все классы, для этого функции мы не передаём параметров:

$("#block").removeClass();	

Пример работы. Удалим у нашего блока класс, который делает его красным цветом:

<html>
<head>
<style>
	#block{
		width: 50px;
		height: 50px;
		border: 1px solid #000;
	}
	
	.red{
		background-color: red;
	}
</style>
</head>
<body>
	
<script src="js/jquery.min.js"></script> </body> </html>
Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.