Czy niestandardowe atrybuty danych HTML5 „działają” w przeglądarce IE 6?

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”?

Możesz pobrać wartości atrybutów niestandardowych (lub własnych) za pomocą getAttribute. Naśladując twój przykład z

<div id="geoff" data-geoff="geoff de geoff">

Potrafię ocenić wartość data-geoffużywania

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

Zobacz 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.

Tak, działają.

IE obsługuje getAttribute()z IE4, do czego wewnętrznie używa jQuery data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

Możesz więc użyć .data()metody jQuery lub zwykłego waniliowego JavaScript:

Przykładowy kod HTML

<div id="some-data" data-name="Tom"></div>

Javascript

var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);

jQuery

var name = $("#some-data").data("name");

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ę .dataGeoffwł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.

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

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 +.

function getDataSet(node) {
    var dataset = {};
    var attrs = node.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var attr = attrs.item(i);
        // make sure it is a data attribute
        if(attr.nodeName.match(new RegExp(/^data-/))) {
            // remove the 'data-' from the string 
            dataset[attr.nodeName.replace(new RegExp('^data-'), '')] = attr.nodeValue;
        }
    }
    return dataset;
}

W IE6 może nie działać. Dla odniesienia: MSDN

Sugeruję użycie jQuery do obsługi większości przypadków:

var geoff = $("#geoff").data("data-geoff");
alert(geoff);

Spróbuj tego w swoim kodowaniu.