Атрибут class HTML

Определение и использование

class Атрибут определяет имя класса элемента.

class Атрибут в основном используется для указания класса таблицы стилей. Однако, также можно использовать его для изменения HTML-элементов с указанным классом с помощью JavaScript (HTML DOM).

См. также:

Уроки HTML:HTML атрибуты

Уроки CSS:Грамматика CSS

Руководство по CSS:Выборщик CSS .class

Руководство по HTML DOM:Метод getElementsByClassName() в HTML DOM

Руководство по HTML DOM:Атрибут className в HTML DOM

Руководство по HTML DOM:Атрибут classList в HTML DOM

Руководство по HTML DOM:Объект Style DOM HTML

Пример

Пример 1

Использование атрибута class в документе HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Заголовок 1</h1>
<p>A paragraph.</p>
<p class="important">Обратите внимание, это важный абзац.:)</p>
</body>
</html>

Попробуйте сами

Ниже страницы предоставлены дополнительные примеры.

Грамматика

<element class="classname">

Значение атрибута

Значение Описание
classname

Назначение одного или нескольких классов элементу.

Если нужно указать несколько классов, их имена можно разделить пробелом.

Это позволяет комбинировать несколько CSS-классов для одного элемента HTML.

Например: <span class="left important">

Правила именования:

  • Название должно начинаться с буквы A-Z или a-z.
  • Может следовать: буквы (A-Za-z), цифры (0-9), дефис (-) и подчеркивание (_).

Более примеров

Пример 2

Добавление нескольких классов к элементу HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Заголовок 1</h1>
<p>Отделение.</p>
</body>
</html>

Попробуйте сами

Пример 3

Использование JavaScript для добавления желтого фона к первому элементу с классом "example" (индекс 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Попробуйте сами

Пример 4

Используйте JavaScript для добавления класса "mystyle" к элементу с id "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Попробуйте сами

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка