کلاس‌ها و CSS در jQuery

کار با کلاس‌های CSS و استایل مستقیم با متد css()

کار با کلاس‌های CSS

چهار متد اصلی برای مدیریت کلاس‌ها:

متدکار
addClass()افزودن یک یا چند کلاس
removeClass()حذف یک یا چند کلاس
toggleClass()افزودن/حذف برعکس
hasClass()بررسی وجود کلاس (true/false)
// افزودن کلاس
$("#box").addClass("highlight");

// افزودن چند کلاس با هم
$("#box").addClass("highlight bordered shadowed");

// حذف کلاس
$("#box").removeClass("highlight");

// حذف همه کلاس‌ها
$("#box").removeClass();

// بررسی کلاس
if ($("#box").hasClass("active")) {
    console.log("فعال است!");
}

متد css()

برای کار با استایل‌های مستقیم (inline):

// دریافت یک ویژگی
var color = $("#box").css("background-color");

// تنظیم یک ویژگی
$("#box").css("color", "red");

// تنظیم چند ویژگی با هم
$("#box").css({
    "background-color": "lightblue",
    "font-size": "18px",
    "padding": "20px"
});

// با callback
$("#box").css("width", function(index, oldWidth) {
    return parseFloat(oldWidth) * 1.5 + "px";  // ۵۰٪ بزرگ‌تر
});

کلاس یا css؟

معیارaddClass/removeClass ✅css() ⚠️
تفکیک دغدغه‌هااستایل در CSS، رفتار در JSاستایل در JS قاطی می‌شود
استفاده مجددکلاس در چند جاتکرار کد
حالت‌های hoverبا CSS خالص ممکن استنیاز به کد JS
مقادیر داینامیکسختساده و مناسب
قانون کلی: اگر استایل ثابت و قابل تعریف در CSS است از کلاس استفاده کنید؛ فقط برای مقادیر داینامیک (مثل رنگ تصادفی یا عرض محاسبه‌شده) از css().

مثال کاربردی: جدول قابل مرتب‌سازی

// هایلایت ستون کلیک‌شده
$("th").click(function() {
    // حذف هایلایت قبلی
    $("th").removeClass("sorted-asc sorted-desc");

    // تعیین جهت مرتب‌سازی
    var isAsc = !$(this).hasClass("sorted-asc");
    $(this).addClass(isAsc ? "sorted-asc" : "sorted-desc");
});

مثال: تغییر استایل داینامیک

// تغییر عرض نوار پیشرفت (مقدار داینامیک = css مناسب است)
$("#progressBar").css("width", percent + "%");

// رنگ تصادفی پس‌زمینه
var colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
$("#box").css("background-color", randomColor);

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط