Главная » Статьи » веб программирование

добавление классов в элемент html (тег)

добавление классов в элемент html (тег)    

 Використовуючи цикл for для колекції headers та масив classes, додати до отриманих тегів-заголовків класи таким чином

до h1 додати клас first

до h2 додати клас second

до h3 додати клас third

h4 додати клас fourth

 

 

const classes = ['first', 'second', 'third', 'fourth'];

const headers = document.querySelectorAll('.container header');

for (let i = 0; i < headers.length; i++) {

    const header = headers[i].querySelector('h1, h2, h3, h4');

   // Отримуємо тип заголовка (h1, h2, h3, h4)

    const headerType = header.tagName.toLowerCase();

 // Встановлюємо відповідний клас залежно від типу заголовка

    switch (headerType) {

        case 'h1':

            header.classList.add('first');

            break;

        case 'h2':

            header.classList.add('second');

            break;

        case 'h3':

            header.classList.add('third');

            break;

        case 'h4':

            header.classList.add('fourth');

            break;

        default:

            //Якщо заголовок не є жодним з очікуваних типів, не додаємо клас

            break;

    }     

}

Категория: веб программирование | Добавил: nirhasia (16.03.2024)
Просмотров: 23 | Рейтинг: 0.0/0
Всего комментариев: 0
avatar

Программирование игр на Python

Django - создание сайтов с нуля

Javascript - просто используем готовые решения