jQuery دریافت و تنظیم کلاس‌های CSS

با استفاده از jQuery، عملیات بر روی عناصر CSS به راحتی انجام می‌شود.

عملیات CSS در jQuery

jQuery دارای چندین روش برای عملیات CSS است. ما به این روش‌ها خواهیم پرداخت:

  • addClass() - اضافه کردن یک یا چند کلاس به عناصر انتخاب شده
  • removeClass() - حذف یک یا چند کلاس از عناصر انتخاب شده
  • toggleClass() - عملیات اضافه‌کردن/حذف کردن کلاس‌ها برای عناصر انتخاب شده
  • css() - تنظیم یا بازگرداندن ویژگی‌های استایل

استایل‌های مثال

این استایل‌ها برای تمام مثال‌های این صفحه استفاده می‌شوند:

.important
{
وزن فونت:سبک;
اندازه‌ی فونت:xx-large;
}
.blue
{
رنگ:آبی;
}

روش jQuery addClass()

در مثال زیر نحوه اضافه کردن یک یا چند کلاس به عناصر مختلف را نشان می‌دهیم. البته، شما می‌توانید چندین عنصر را نیز انتخاب کنید:

مثال

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

آزمایش کنید

شما همچنین می‌توانید چندین کلاس را در روش addClass() مشخص کنید:

مثال

$("button").click(function(){
  $("#div1").addClass("important blue");
});

آزمایش کنید

روش jQuery removeClass()

در مثال زیر نحوه حذف یک یا چند کلاس مشخص از عناصر مختلف را نشان می‌دهیم:

مثال

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

آزمایش کنید

روش jQuery toggleClass()

در مثال زیر نحوه استفاده از روش jQuery toggleClass() را نشان می‌دهیم. این روش عملیات اضافه‌کردن/حذف کردن کلاس‌ها را برای عناصر انتخاب شده انجام می‌دهد:

مثال

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

آزمایش کنید

روش jQuery css()

ما در فصل بعدی به روش jQuery css() می‌پردازیم.

دستورالعمل jQuery HTML

برای دسترسی به محتوای کامل روش‌های jQuery CSS، لطفاً به وب‌سایت ما دستورالعمل jQuery CSS