Используют ли атрибуты пользовательских данных 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" в нем?
Ответы
Ответ 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, конечно.
Ответ 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
var name = $("#some-data").data("name");
Ответ 3
IE6 не только не поддерживает функцию атрибута данных HTML5, на самом деле практически никакой браузер не поддерживает их! Единственным исключением на данный момент является Chrome.
Вы совершенно свободны использовать data-geoff="geoff de geoff"
как атрибут, но только Chrome из текущих версий браузера предоставит вам свойство .dataGeoff
.
К счастью, все текущие браузеры, включая IE6, могут ссылаться на неизвестные атрибуты с использованием стандартного метода DOM .getAttribute()
, поэтому .getAttribute("data-geoff")
будет работать везде.
В ближайшем будущем новые версии Firefox и Safari начнут поддерживать атрибуты данных, но, учитывая, что есть совершенно хороший способ доступа к ней, который работает во всех браузерах, тогда нет никаких оснований использовать HTML5 метод, который будет работать только для некоторых ваших посетителей.
Вы можете увидеть больше о текущем состоянии поддержки этой функции в CanIUse.com.
Надеюсь, что это поможет.
Ответ 4
Я думаю, что IE всегда поддерживал это (по крайней мере, начиная с IE4), и вы можете получить к ним доступ от JS. Их называли свойствами "expando". См. старая статья MSDN
Это поведение можно отключить, установив для свойства expando значение false в элементе DOM (по умолчанию оно истинно, поэтому свойства expando работают по умолчанию).
Изменить: исправлен URL
Ответ 5
Если вы хотите получить все атрибуты пользовательских данных одновременно, как свойство набора данных в новых браузерах, вы можете сделать следующее. Это то, что я сделал и отлично работает для меня в 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;
}
Ответ 6
В IE6 он может не работать. Для справки: MSDN
Я предлагаю использовать jQuery для обработки большинства случаев:
var geoff = $("#geoff").data("data-geoff");
alert(geoff);
Попробуйте это в своем кодировании.