Mam następny html:
<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>
Czy można pobrać atrybuty zaczynające się od data-
i użyć ich w kodzie JavaScript, takim jak poniższy kod? Na razie null
w rezultacie otrzymuję .
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
źródło
źródło
Odpowiedzi:
Musisz uzyskać dostęp do
dataset
nieruchomości :Wynik:
źródło
Ponieważ ta
dataset
właściwość nie była obsługiwana przez Internet Explorer do wersji 11, możeszgetAttribute()
zamiast tego użyć :Dokumentacja zbioru danych
Dokumentacja getAttribute
źródło
Możesz uzyskać do niego dostęp jako
itd. Więc w tym przypadku:
this.dataset.points
źródło
Możesz również pobrać atrybuty za pomocą metody getAttribute () , która zwróci wartość określonego atrybutu HTML.
źródło
jeśli celujesz w atrybut danych w elemencie HTML,
document.dataset
nie będzie działaćpowinieneś użyć
lub
źródło
Nowoczesne przeglądarki akceptują HTML i SVG DOMnode.dataset
Korzystanie z właściwości zestawu danych węzła DOM w czystym języku JavaScript .
To stary standard JavaScript dla elementów HTML (od Chorme 8 i Firefox 6), ale nowy dla SVG (od roku 2017 z Chorme 55.x i Firefox 51) ... Nie jest to problem dla SVG, ponieważ w dzisiejszych czasach (2019) wersja na wykorzystanie akcji jest zdominowany przez nowoczesne przeglądarki.
Wartości par klucz-wartość zestawu danych są czystymi ciągami, ale dobrą praktyką jest przyjęcie formatu ciągów JSON dla typów danych niebędących ciągami, aby przeanalizować je według
JSON.parse()
.Używanie właściwości zestawu danych w dowolnym kontekście
Fragment kodu do pobierania i ustawiania zestawów danych klucz-wartość w kontekstach HTML i SVG.
źródło
Około 2019 r., Używając jquery, można to uzyskać za pomocą selektora
$('#DOMId').data('typeId')
gdzie$('#DOMId')
jest jquery dla elementu span.źródło
Spróbuj tego zamiast swojego kodu:
źródło
.data('type');
zamiast tego.JSON
rezultat, a niealert
zdata-type
atrybutu.