При создании интерактивных веб-страниц часто возникает необходимость использовать специальные атрибуты, которые начинаются с «data-«. Это полезный способ добавить дополнительные данные к HTML-элементам, которые затем можно использовать в JavaScript. Вот пример такого кода:
<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>
Однако, при попытке обратиться к этим атрибутам напрямую в JavaScript, как показано ниже, результатом будет null.
document.getElementById("the-span").addEventListener("click", function(){
var json = JSON.stringify({
id: parseInt(this.typeId),
subject: this.datatype,
points: parseInt(this.points),
user: "H. Pauwelyn"
});
});
Почему это происходит? Дело в том, что «data-» атрибуты не являются стандартными свойствами объекта элемента, и их нельзя получить прямым обращением к свойству объекта.
Для доступа к этим атрибутам в JavaScript требуется использовать метод getAttribute(), который возвращает значение указанного атрибута элемента. Вот как это выглядит:
var el = document.getElementById('the-span');
var typeId = el.getAttribute('data-typeId');
var type = el.getAttribute('data-type');
var points = el.getAttribute('data-points');
var important = el.getAttribute('data-important');
Также можно использовать объект dataset, который предоставляет доступ ко всем «data-» атрибутам элемента. Имена свойств этого объекта соответствуют именам «data-» атрибутов, но без префикса «data-«. Вот пример:
var el = document.getElementById('the-span');
var typeId = el.dataset.typeId;
var type = el.dataset.type;
var points = el.dataset.points;
var important = el.dataset.important;
Обратите внимание, что dataset возвращает все значения в виде строк, поэтому для числовых значений может потребоваться использовать функцию parseInt() или parseFloat().
Итак, применяя эти знания, можно успешно получить значения «data-» атрибутов и использовать их в JavaScript.
Добавить комментарий