Атрибут data- * в html5.

Відео: HTML форми - тег form і його атрибути

Відео: Custom Data Attributes HTML jаvascript CSS Tutorial

Всім привіт! У цій невеликій статті ми розглянемо, як ставити свої власні атрибути за допомогою data- *.

В HTML5 з`явилася можливість задати будь-який атрибут за допомогою data- *. Їх можна застосувати до будь-якого елементу на сторінці, а задаються вони в форматі data-любое_імя.

Відео: HTML. Урок 19. Спеціальні атрибути

 




 
data- * 
charset="Utf-8"gt; 
 
 
data-title="Підказка"id="Test"gt;Якийсь текст

Для чого це потрібно? Застосування дуже широке. Наприклад, в нашому прикладі ми задали атрибут data-title зі значенням "Підказка". Далі ми можемо за допомогою скрипта вибрати це значення і виводити його при наведенні на текст.

var el = document.getElementById("Test") - 
var text = el.getAttribute("Data-title") - 
alert(text) -

Також даний атрибут можна використовувати, щоб стилізувати елементи.

data-name="Myname"gt;

Але зазвичай його використовують для зберігання якоїсь інформації. Оскільки значення може бути будь-яким, то ми можемо, наприклад, отримати JSON рядок і записати її в наш атрибут, а потім її як-небудь використовувати.