Code.Beer

В этой записи я расскажу как с помощью 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>

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

• setAttribute
• getAttribute
• hasAttribute
• removeAttribute

Добавить или изменить атрибут

setAttribute — функция добавляет новый атрибут или изменяет значение существующего атрибута по указанному элементу.

Синтаксис функции:

element.setAttribute(name, value);

• name — задает имя атрибута.
• value — указывает новое значение атрибута.

В примере я использую функцию setAttribute чтобы добавить атрибут disabled для элемента <button>:

<button id="btn">Hello World</button>

<script>
var b = document.querySelector("#btn");
b.setAttribute("disabled", "disabled");
</script>

Получить значение атрибута

getAttribute — функция вернет значение указанного атрибута элемента.

Синтаксис функции:

var attribute = element.getAttribute(attributeName);

• attribute — строка содержащая значение атрибута.
• attributeName — имя атрибута, значение которого вы хотите получить.

В примере я использую функцию getAttribute чтобы получить значение атрибута элемента <div>:

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

<script>
var div1 = document.getElementById("div1");
var align = div1.getAttribute("align");

alert(align);
</script>

Проверить наличие атрибута

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

Синтаксис функции:

var result = element.hasAttribute(attName);

• result — значение true или false.
• AttName — задает имя атрибута.

В примере я использую функцию hasAttribute чтобы проверить наличие атрибута align="center" для элемента <div>:

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

<script>
var d = document.getElementById("div1");

if (d.hasAttribute("align")) {
    alert("align center");
}
</script>

Удалить атрибут

removeAttribute — удаляет атрибут из указанного элемента.

Синтаксис функции:

element.removeAttribute(attrName);

• attrName — строка с именем атрибута, который нужно удалить.

В примере я использую функцию removeAttribute чтобы удалить атрибут align="center" для элемента <div>:

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

<script>
document.getElementById("div1").removeAttribute("align");
</script>