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 中，出现带有“geoff de geoff”的警报？

Answer 1

您可以使用 getAttribute 检索自定义（或您自己的）属性的值。按照您的示例，

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

data-geoff 的值

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

我可以使用See MSDN。尽管那里提到您需要 IE7 才能使其正常工作，但我不久前使用 IE6 对其进行了测试，它运行正常（即使在怪异模式下）。

当然，这与 HTML5 特定的属性无关。

Answer 2

是的，它们可以工作。

IE 从 IE4 开始就支持 getAttribute()，这也是 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");

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访问它们。它们被称为“expando 属性”。请参阅旧的 MSDN 文章

此行为可以禁用通过将 DOM 元素上的 Expando 属性 设置为 false（默认情况下为 true，因此 Expando 属性 默认情况下起作用）。

编辑：修复了 URL

Answer 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;
}

Answer 6

在 IE6 中，它可能不起作用。供参考：MSDN

我建议使用 jQuery 来处理大多数情况：

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

在您的编码中尝试这个。