Niestandardowe atrybuty danych: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data
Kiedy mówię „praca”, mam na myśli, jeśli mam taki HTML:
<div id="geoff" data-geoff="geoff de geoff">
będzie następujący JavaScript:
var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);
wytworzyć w IE 6 ostrzeżenie z „geoff de geoff”?
data-geoff
nie jest to prawidłowy identyfikator JS ze względu na znak „-”. Musisz użyćdataGeoff
w skryptach.geoff.dataGeoff
nie działało. Okazało się ( whatwg.org/specs/web-apps/current-work/multipage/... ), że powinny byćgeoff.dataset.geoff
, aleelement.dataset
nadal jestundefined
w nowoczesnych przeglądarkach, to nie obsługiwanych.Odpowiedzi:
Możesz pobrać wartości atrybutów niestandardowych (lub własnych) za pomocą
getAttribute
. Naśladując twój przykład zPotrafię ocenić wartość
data-geoff
używaniaZobacz MSDN . I chociaż jest tam wspomniane, że potrzebujesz IE7, aby to działało, testowałem to jakiś czas temu z IE6 i działało poprawnie (nawet w trybie dziwactw).
Ale to oczywiście nie ma nic wspólnego z atrybutami specyficznymi dla HTML5.
źródło
Tak, działają.
IE obsługuje
getAttribute()
z IE4, do czego wewnętrznie używa jQuerydata()
.Możesz więc użyć
.data()
metody jQuery lub zwykłego waniliowego JavaScript:Przykładowy kod HTML
Javascript
jQuery
źródło
Note: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.
<div lala="Tom"></div>
, czy to byłoby w porządku w IE6? Jak odczytasz wartość?IE6 nie tylko nie obsługuje funkcji atrybutu danych HTML5, w rzeczywistości praktycznie żadna aktualna przeglądarka ich nie obsługuje! Obecnie jedynym wyjątkiem jest Chrome.
Możesz używać go
data-geoff="geoff de geoff"
jako atrybutu, ale tylko Chrome w aktualnych wersjach przeglądarek zapewni Ci tę.dataGeoff
właściwość.Na szczęście wszystkie obecne przeglądarki - w tym IE6 - mogą odwoływać się do nieznanych atrybutów przy użyciu standardowej
.getAttribute()
metody DOM , więc.getAttribute("data-geoff")
będą działać wszędzie.W najbliższej przyszłości nowe wersje Firefoksa i Safari zaczną obsługiwać atrybuty danych, ale biorąc pod uwagę, że istnieje doskonały sposób na uzyskanie do nich dostępu, który działa we wszystkich przeglądarkach, to naprawdę nie ma powodu, aby używać metody HTML5, która będzie działa tylko dla niektórych odwiedzających.
Więcej informacji o obecnym stanie wsparcia dla tej funkcji można znaleźć na stronie CanIUse.com .
Mam nadzieję, że to pomoże.
źródło
dataset
właściwości, ale wszystkie przeglądarki umożliwiają przechowywanie danych w atrybutach z przedrostkiemdata-
i (jak mówisz) pobieranie ich za pośrednictwemgetAttribute
. Dlatego w pewnym sensie obsługują tę funkcję, ponieważ można skutecznie używać samych atrybutów.dataset
nieruchomości, aby uzyskać do nich dostęp - nie wiem, jakie korzyści ma ona oferowaćgetAttribute
..dataXYZ
właściwości; jak mówisz, podstawowe funkcje są szeroko obsługiwane, ale nie dlatego, że jest to HTML5.Myślę, że IE zawsze to obsługiwał (przynajmniej zaczynając od IE4) i możesz uzyskać do nich dostęp z JS. Nazywano je „właściwościami ekspandowania”. Zobacz stary artykuł MSDN
To zachowanie można wyłączyć, ustawiając właściwość expando na false elementu DOM (domyślnie jest to prawda, więc właściwości expando działają domyślnie).
Edycja: naprawiono adres URL
źródło
Jeśli chcesz pobrać wszystkie niestandardowe atrybuty danych jednocześnie, takie jak właściwość zestawu danych w nowszych przeglądarkach, możesz wykonać następujące czynności. To właśnie zrobiłem i działa świetnie dla mnie w ie7 +.
źródło
W IE6 może nie działać. Dla odniesienia: MSDN
Sugeruję użycie jQuery do obsługi większości przypadków:
Spróbuj tego w swoim kodowaniu.
źródło