محرر ويب أونلاين

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}

.highlight-border {
    border-left: 3px solid cornflowerblue;
}
        </style>
    </head>
<body>
    <h1>JS Set Class Value For Element</h1>
    <p>You can use the "classList.className" property to set the class value for the element.</p>
    <p><b>Note:</b> We append the 'highlight-border' class at the end of the 'highlight' name, that's why we need a empty space between them.</p>
    <p id="demo" class="highlight">I am using the highlight and the highlight-border classes.</p>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // element للعنصر الذي يمثله المتغير highlight-border هنا قمنا بإضافة الكلاس
        // 'highlight' يجب وضع مسافة فارغة قبل إسم الكلاس ' ' كما فعلنا حتى لا يلتصق بالكلاس
        element.className += ' highlight-border';
        
        // ----------------- ملاحظة مهمة -----------------
        // highlighhighligh-border لو لم نضع مسافة فارغة لكانت أسماء الكلاسات إلتصقت ببعضها هكذا
        // و بالطبع هذا الأمر كان سيسبب مشكلة في التصميم لأنه لا يوجد كلاس بهذا الإسم
    </script>
</body>
</html>