Работа с класовете на HTML

Най-важното за работа с HTML класове в JavaScript

За да променяте визията на елементите динамично, трябва да манипулирате техните CSS класове чрез JavaScript. Най-сигурният и модерен начин е чрез classList, а не чрез className, защото className презаписва всички класове, докато classList позволява да добавяте и премахвате конкретни класове без да губите останалите. Работете с DOM елементи след като страницата е напълно заредена, за да сте сигурни, че те съществуват.

Стъпка по стъпка: добавяне и премахване на клас

1. Изчакайте зареждането на страницата (window load).
2. Вземете елемента (например h1) чрез DOM заявка.
3. Създайте CSS клас (например .Red) и му задайте стил – color: red;.
4. Добавете класа към елемента чрез classList.add.
5. Добавете втори клас (например blue) и вижте, че първият остава.
6. Премахнете конкретен клас чрез classList.remove.
7. Проверете дали даден клас съществува чрез classList.contains.

Основни методи за работа с класове

• element.className – задава стойността на атрибута class, но презаписва всички съществуващи класове
• element.classList.add() – добавя нов клас, без да засяга останалите
• element.classList.remove() – премахва конкретен клас
• element.classList.contains() – проверява дали елементът има даден клас (връща true/false)

Този подход ви позволява да комбинирате множество стилове и да управлявате динамично поведението и визията на елементите.