JavaScript класс элемента

В этой записи я расскажу как с помощью JavaScript добавить или изменить атрибут class для элементов страницы. Часто этот метод используют для создания динамических элементов страницы. Чтобы в JavaScrip добавить, удалить, переключить или проверить класс элемента используют методы, которые содержит свойство classList:

  • classList.add
  • classList.remove
  • classList.toggle
  • classList.contains
  • classList.length
  • classList.item

Добавить класс

classList.add — добавить класс элемента.

Синтаксис:

element.classList.add(name);
  • name — имя класса.

В примере я использую метод classList.add чтобы добавить класс style для для элемента <div>:

<div id="div1">Hello World</div>

<script>
var div1 = document.getElementById("div1");
div1.classList.add("style");
</script>

Удалить класс

classList.remove — удалить класс элемента.

Синтаксис:

element.classList.remove(name);
  • name — имя класса.

В примере я использую метод classList.remove чтобы удалить класс style для для элемента <div>:

<div id="div1" class="style">Hello World</div>

<script>
var div1 = document.getElementById("div1");
div1.classList.remove("style");
</script>

Переключить класс

classList.toggle — добавить имя класса, если его нет, или удалить, если он есть.

Синтаксис:

element.classList.toggle(name);
  • name — имя класса.

В примере я использую метод classList.toggle чтобы добавить класс style для для элемента <div>:

<div id="div1">Hello World</div>

<script>
var div1 = document.getElementById("div1");
div1.classList.toggle("style");
</script>

Или удалить класс style, если он есть:

<div id="div1" class="style">Hello World</div>

<script>
var div1 = document.getElementById("div1");
div1.classList.toggle("style");
</script>

Проверить наличие класса

classList.contains — возвращает логическое значение, указывающее, имеет ли элемент указанный класс или нет.

Синтаксис:

element.classList.contains(name);
  • name — имя класса.

В примере я использую метод classList.contains чтобы добавить класс style для для элемента <div>:

<div id="div1" class="style">Hello World</div>

<script>
var div1 = document.getElementById("div1");
alert(div1.classList.contains("style"));
</script>

Количество классов

classList.length — возвращает количество классов в элементе.

Синтаксис:

element.classList.length;

В примере я использую метод classList.length чтобы получить количество классов для для элемента <div>:

<div id="div1" class="style1 style2">Hello World</div>

<script>
var div1 = document.getElementById("div1");
alert(div1.classList.length);
</script>

Узнать имя класса

classList.item — возвращает имя класса по его порядковому номеру.

Синтаксис:

element.classList.item(number);
  • number — порядковый номер класса.

В примере я использую метод classList.item чтобы получить имя класса по его порядковому:

<div id="div1" class="style1 style2">Hello World</div>

<script>
var div1 = document.getElementById("div1");
alert(div1.classList.item(0));
</script>

Читайте также: