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

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

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

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

Добавили класс со значением 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

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