فئات CSS والتنسيق

<div id="box">انقر عليّ</div>
<button id="highlight-btn">تمييز</button>

.highlighted {
    background-color: yellow;
    border: 2px solid orange;
}

.large {
    font-size: 24px;
}

.bold {
    font-weight: bold;
}

// إضافة فئة واحدة
$("#highlight-btn").click(function() {
    $("#box").addClass("highlighted");
});

// إضافة فئات متعددة (مفصولة بمسافة)
$("#box").addClass("large bold");

// إضافة الفئات واحدة تلو الأخرى
$("#box").addClass("highlighted").addClass("large").addClass("bold");

// إزالة فئة واحدة
$("#box").removeClass("highlighted");

// إزالة فئات متعددة
$("#box").removeClass("large bold");

// إزالة جميع الفئات
$("#box").removeClass();

<div id="panel">لوحة المحتوى</div>
<button id="toggle-btn">تبديل الظهور</button>

.hidden {
    display: none;
}

.active {
    background-color: lightblue;
    border-left: 4px solid blue;
}

// تبديل فئة واحدة
$("#toggle-btn").click(function() {
    $("#panel").toggleClass("hidden");
});

// تبديل فئات متعددة
$("#panel").toggleClass("active highlighted");

// التبديل مع قيمة منطقية (المعامل الثاني)
var shouldShow = true;
$("#panel").toggleClass("hidden", !shouldShow);

// فحص الفئة
if ($("#box").hasClass("highlighted")) {
    console.log("الصندوق مُميّز");
} else {
    console.log("الصندوق غير مُميّز");
}

// تنسيق شرطي
if (!$("#panel").hasClass("active")) {
    $("#panel").addClass("active");
}

<ul>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
    <li>عنصر 3</li>
    <li>عنصر 4</li>
</ul>

// إضافة فئات متناوبة
$("li").addClass(function(index) {
    return index % 2 === 0 ? "even" : "odd";
});

// التبديل بناءً على الحالة الحالية
$("li").toggleClass(function(index, currentClass) {
    return currentClass.includes("active") ? "inactive" : "active";
});

// الحصول على خاصية واحدة
var color = $("#box").css("background-color");
console.log(color); // "rgb(255, 255, 0)"

var fontSize = $("#box").css("font-size");
console.log(fontSize); // "16px"

// تعيين خاصية واحدة
$("#box").css("color", "red");

// تعيين خصائص متعددة (صيغة الكائن)
$("#box").css({
    "background-color": "#f0f0f0",
    "border": "2px solid #333",
    "padding": "20px",
    "border-radius": "10px"
});

// استخدام الحالة الجملية للخصائص متعددة الكلمات
$("#box").css({
    backgroundColor: "#f0f0f0",
    borderRadius: "10px"
});

// تعيين العرض بناءً على حساب
var windowWidth = $(window).width();
$("#box").css("width", windowWidth * 0.5 + "px");

// استخدام دالة استدعاء للقيم الديناميكية
$("div.item").css("left", function(index) {
    return (index * 100) + "px";
});

// تنسيق شبيه بالحركة
var opacity = 0.5;
$("#box").css("opacity", opacity);

<div id="app">
    <header>
        <h1>موقعي الإلكتروني</h1>
        <div id="theme-controls">
            <button class="theme-btn" data-theme="light">فاتح</button>
            <button class="theme-btn" data-theme="dark">داكن</button>
            <button class="theme-btn" data-theme="blue">أزرق</button>
        </div>
    </header>
    <main>
        <p>المحتوى هنا...</p>
    </main>
</div>

/* السمة الافتراضية (فاتح) */
#app {
    background-color: #ffffff;
    color: #333333;
}

/* السمة الداكنة */
#app.theme-dark {
    background-color: #1a1a1a;
    color: #f0f0f0;
}

#app.theme-dark header {
    background-color: #2d2d2d;
}

/* السمة الزرقاء */
#app.theme-blue {
    background-color: #e3f2fd;
    color: #0d47a1;
}

#app.theme-blue header {
    background-color: #2196f3;
    color: white;
}

.theme-btn.active {
    background-color: #4caf50;
    color: white;
}

$(document).ready(function() {
    // تحميل السمة المحفوظة
    var savedTheme = localStorage.getItem("theme") || "light";
    applyTheme(savedTheme);

    // مبدّل السمات
    $(".theme-btn").click(function() {
        var theme = $(this).data("theme");
        applyTheme(theme);

        // حفظ التفضيل
        localStorage.setItem("theme", theme);
    });

    function applyTheme(theme) {
        // إزالة جميع فئات السمات
        $("#app").removeClass("theme-light theme-dark theme-blue");

        // إضافة فئة السمة المحددة
        if (theme !== "light") {
            $("#app").addClass("theme-" + theme);
        }

        // تحديث الزر النشط
        $(".theme-btn").removeClass("active");
        $(".theme-btn[data-theme='" + theme + "']").addClass("active");
    }
});

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">القسم 1</div>
        <div class="accordion-content">محتوى القسم 1</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">القسم 2</div>
        <div class="accordion-content">محتوى القسم 2</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">القسم 3</div>
        <div class="accordion-content">محتوى القسم 3</div>
    </div>
</div>

.accordion-content {
    display: none;
    padding: 15px;
    background-color: #f9f9f9;
}

.accordion-item.active .accordion-content {
    display: block;
}

.accordion-header {
    padding: 15px;
    background-color: #4caf50;
    color: white;
    cursor: pointer;
}

.accordion-header:hover {
    background-color: #45a049;
}

.accordion-item.active .accordion-header {
    background-color: #388e3c;
}

$(document).ready(function() {
    $(".accordion-header").click(function() {
        var item = $(this).parent();

        // إغلاق جميع الأقسام الأخرى
        $(".accordion-item").not(item).removeClass("active");

        // تبديل القسم الحالي
        item.toggleClass("active");
    });
});

<div class="user-list">
    <div class="user" data-status="online">
        <span class="status-indicator"></span>
        <span>أحمد محمد</span>
    </div>
    <div class="user" data-status="offline">
        <span class="status-indicator"></span>
        <span>فاطمة علي</span>
    </div>
    <div class="user" data-status="away">
        <span class="status-indicator"></span>
        <span>عمر حسن</span>
    </div>
</div>

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.user[data-status="online"] .status-indicator {
    background-color: #4caf50;
}

.user[data-status="offline"] .status-indicator {
    background-color: #9e9e9e;
}

.user[data-status="away"] .status-indicator {
    background-color: #ff9800;
}

$(document).ready(function() {
    // تحديث حالة المستخدم
    function updateUserStatus(username, status) {
        var user = $(".user").filter(function() {
            return $(this).text().includes(username);
        });

        user.attr("data-status", status);

        // إضافة تمييز مؤقت
        user.addClass("updated");
        setTimeout(function() {
            user.removeClass("updated");
        }, 1000);
    }

    // محاكاة تغييرات الحالة
    setInterval(function() {
        var statuses = ["online", "offline", "away"];
        var randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
        updateUserStatus("أحمد محمد", randomStatus);
    }, 5000);
});

// إضافة فئات متعددة دفعة واحدة (أفضل)
$("#box").addClass("class1 class2 class3");

// ربط العمليات (أفضل)
$("#box").addClass("highlighted").css("opacity", 0.8).show();

// استخدام فئات CSS بدلاً من الأنماط المضمّنة (الأفضل)
// سيئ:
$("#box").css("color", "red").css("font-size", "20px");

// جيد:
$("#box").addClass("styled-box");
/* .styled-box { color: red; font-size: 20px; } */