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

我认为 IE 一直支持这个（至少从 IE4 开始），你可以从 JS 访问它们。它们被称为“扩展属性”。见old MSDN article

可以通过在 DOM 元素上将 expando property 设置为 false 来禁用此行为（默认情况下为 true，因此 expando properties 默认工作）。

编辑：修正网址

Answer 2

您可以使用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 特有的属性无关。

Answer 3

是的，它们有效。

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 4

IE6 不仅不支持 HTML5 数据属性功能，事实上不当前的浏览器几乎都支持它们！目前唯一的例外是 Chrome。

您完全可以使用 data-geoff="geoff de geoff" 作为属性，但只有当前浏览器版本的 Chrome 会为您提供 .dataGeoff 属性。

幸运的是，所有当前浏览器 - 包括 IE6 - 都可以使用标准 DOM .getAttribute() 方法引用未知属性，因此 .getAttribute("data-geoff") 可以在任何地方使用。

在不久的将来，新版本的 Firefox 和 Safari 将开始支持 data 属性，但鉴于有一种非常好的访问它的方法适用于所有浏览器，那么真的没有理由使用 HTML5仅对部分访问者有效的方法。

您可以在CanIUse.com 上查看有关此功能的当前支持状态的更多信息。

希望对您有所帮助。

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);

在你的编码中试试这个。