Чи "працює" користувацькі атрибути HTML5 у IE 6?

Спеціальні атрибути даних: 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 попередження з "geoff de geoff" в ньому?

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

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

Я можу отримати значення data-geoffвикористання

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

Див. MSDN . І хоча там зазначається, що вам потрібен IE7, щоб змусити це працювати, я тестував це деякий час тому з IE6, і він функціонував правильно (навіть у режимі диваків).

Але це, звичайно, не має нічого спільного з атрибутами, характерними для HTML5.

Так, вони працюють.

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

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

Мало того, що IE6 не підтримує функцію атрибутів даних HTML5, насправді практично жоден браузер не підтримує їх! На сьогодні єдиний виняток - Chrome.

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

На щастя, всі поточні браузери, включаючи IE6, можуть посилатися на невідомі атрибути за допомогою стандартного .getAttribute()методу DOM , тому .getAttribute("data-geoff")вони працюватимуть всюди.

Найближчим часом нові версії Firefox та Safari почнуть підтримувати атрибути даних, але враховуючи, що існує ідеально хороший спосіб доступу до нього, який працює у всіх браузерах, то справді немає причин використовувати метод HTML5, який буде працюють лише для деяких ваших відвідувачів.

Більше про поточний стан підтримки цієї функції можна дізнатися на сайті CanIUse.com .

Сподіваюся, що це допомагає.

Я думаю, що IE завжди підтримував це (принаймні, починаючи з IE4), і ви можете отримати доступ до них з JS. Їх називали "властивості експандо". Побачити стару статтю MSDN

Цю поведінку можна відключити, встановивши властивість експандо на значення false на елементі DOM (це правда за замовчуванням, тому властивості розширення працюють за замовчуванням).

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

Якщо ви хочете отримати всі спеціальні атрибути даних одночасно, як властивість набору даних у новіших браузерах, ви можете зробити наступне. Це те, що я зробив і для мене чудово працює в 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;
}

У IE6 це може не працювати. Для довідки: MSDN

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

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

Спробуйте це у своєму кодуванні.