JavaScript | Как добавить класс для HTML-элемента?

Есть HTML-разметка:

<body>
   <h1>Как добавить класс для HTML-элемента?</h1>
</body>

Мы хотим для заголовка h1 назначить класс со значением «big».

Класс в HTML является атрибутом элемента, поэтому мы воcпользуемся DOM интерфейсом Element и его методом setAttribute(qualifiedName, value)

Шаг № 1 — Получение элемента h1

Предположим, что у нас «правильный» сайт и заголовок H1 встречается на странице всего 1 раз. Создадим переменную elh1, в которой будем хранить наш заголовок H1. Получим этот элемент <h1>:

var elh1 = document.getElementsByTagName("h1")[0]

Получили элемент h1 без класса - JavaScript — Получили элемент h1 без класса — JavaScript

Шаг № 2 — Присваивание класса со значением для элемента h1

elh1.setAttribute("class","big")

На элементе H1 мы вызываем метод setAttribute() и передаём в него 2 параметра — имя атрибута и значение атрибута

Добавили класс со значением big для HTML-элемента - JavaScript — Добавили класс со значением big для HTML-элемента — JavaScript

Готово!

Информационные ссылки

DOM | Интерфейс Element

Стандарт DOM — Раздел «Interface Element» — https://dom.spec.whatwg.org/#interface-element

Стандарт DOM — Раздел «The setAttribute(qualifiedName, value) method» — https://dom.spec.whatwg.org/#dom-element-setattribute

Поделись записью