У меня есть следующий HTML:
<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>
Можно ли получить атрибуты, которые начинаются с data-
, и использовать его в коде 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"
});
});
javascript
html
custom-data-attribute
H. Pauwelyn
источник
источник
Ответы:
Вам необходимо получить доступ к
dataset
собственности :Результат:
источник
Поскольку это
dataset
свойство не поддерживалось Internet Explorer до версии 11, вы можете использоватьgetAttribute()
вместо него:Документация набора данных
документация getAttribute
источник
Вы можете получить к нему доступ как
и т.д. Так что в этом случае:
this.dataset.points
источник
Вы также можете получить атрибуты с помощью метода getAttribute (), который будет возвращать значение определенного атрибута HTML.
источник
если вы нацелены на атрибут данных в элементе HTML,
document.dataset
не будет работатьты должен использовать
или
источник
Современные браузеры принимают HTML и SVG DOMnode.dataset
Использование свойства набора данных DOM-узла чистого Javascript .
Это старый стандарт Javascript для элементов HTML (начиная с Chorme 8 и Firefox 6), но новый для SVG (с 2017 года с Chorme 55.x и Firefox 51) ... Это не проблема для SVG, потому что в настоящее время (2019) доля использования версии преобладают в современных браузерах.
Значения ключей-значений набора данных являются чистыми строками, но хорошей практикой является принятие строкового формата JSON для нестроковых типов данных для его анализа
JSON.parse()
.Использование свойства набора данных в любом контексте
Фрагмент кода для получения и установки наборов ключей-значений в контекстах HTML и SVG.
источник
Приблизительно в 2019 году, используя jquery, к нему можно обратиться, используя
$('#DOMId').data('typeId')
где$('#DOMId')
селектор jquery для вашего элемента span.источник
Попробуйте это вместо вашего кода:
источник
.data('type');
вместо.JSON
результат, а неalert
изdata-type
атрибута.