“Работают” ли пользовательские атрибуты данных HTML5 в IE 6?

Question

Пользовательские атрибуты данных: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Когда я говорю “работать”, я имею в виду, есть ли у меня такой HTML:

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

будет ли следующий JavaScript:

var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

создать в IE 6 оповещение с надписью “Джефф де джефф” в нем?

Answer 1

Вы можете получить значения пользовательских (или ваших собственных) атрибутов, используя getAttribute.Следуя вашему примеру с

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

Я могу получить значение data-geoff используя

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

Видишь MSDN.И хотя там упоминается, что вам нужен IE7, чтобы заставить это работать, я некоторое время назад протестировал это с IE6, и это функционировало правильно (даже в режиме quirks).

Но это, конечно, не имеет никакого отношения к атрибутам, специфичным для HTML5.

Answer 2

Да, они работают.

IE поддержал getAttribute() из IE4, для чего jQuery использует внутренне data().

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

Таким образом, вы можете либо использовать jQuery .data() метод или простой ванильный JavaScript:

Пример 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 - jQuery - запрос

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

Answer 3

IE6 не только не поддерживает функцию атрибута данных HTML5, фактически практически НЕТ текущий браузер поддерживает их!Единственным исключением на данный момент является Chrome.

Вы совершенно вольны использовать data-geoff="geoff de geoff" в качестве атрибута, но только Chrome текущих версий браузера предоставит вам .dataGeoff собственность.

К счастью, ВСЕ текущие браузеры , включая IE6 , могут ссылаться на неизвестные атрибуты , используя стандартный DOM .getAttribute() метод, так что .getAttribute("data-geoff") будет работать везде.

В самом ближайшем будущем новые версии Firefox и Safari начнут поддерживать атрибуты данных, но, учитывая, что существует отличный способ доступа к ним, который работает во всех браузерах, тогда действительно нет причин использовать метод HTML5, который будет работать только для некоторых ваших посетителей.

Подробнее о текущем состоянии поддержки этой функции вы можете узнать по адресу CanIUse.com.

Надеюсь, это поможет.

Answer 4

Я думаю, IE всегда поддерживал это (по крайней мере, начиная с IE4), и вы можете получить к ним доступ из JS.Они назывались "свойства расширения".Видишь старая статья MSDN

Это поведение можно отключить, установив expando свойство к false для элемента DOM (по умолчанию это true, поэтому расширение свойства работает по умолчанию).

Редактировать:исправлен URL-адрес

Answer 5

Если вы хотите получить все пользовательские атрибуты данных сразу, например свойство dataset в более новых браузерах, вы могли бы сделать следующее.Это то, что я сделал, и оно отлично работает для меня в 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;
}

Answer 6

В IE6, это может не сработать.Для справки: MSDN

Я предлагаю использовать jQuery для обработки большинства случаев:

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

Попробуйте это в своем кодировании.