Javascript HTML5 自定义数据属性在 IE 6 中“有效”吗？

Do HTML5 custom data attributes “work” in IE 6?

提问by Paul D. Waite

Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

自定义数据属性：http: //dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

When I say “work”, I mean, if I've got HTML like this:

当我说“工作”时，我的意思是，如果我有这样的 HTML：

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

will the following JavaScript:

将以下 JavaScript：

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

produce, in IE 6, an alert with “geoff de geoff” in it?

在 IE 6 中生成带有“geoff de geoff”的警报？

采纳答案by Marcel Korpel

You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with

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

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

I can get the value of data-geoffusing

我可以获得data-geoff使用的价值

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

See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).

请参阅MSDN。虽然那里提到你需要 IE7 才能让它工作，但我不久前用 IE6 测试过它并且它运行正常（即使在怪癖模式下）。

But this has nothing to do with HTML5-specific attributes, of course.

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

回答by Marko

Yes, they work.

是的，他们工作。

IE has supported getAttribute()from IE4 which is what jQuery uses internally for data().

IE 已经支持getAttribute()IE4，这是 jQuery 在内部用于data().

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

So you can either use jQuery's .data()method or plain vanilla JavaScript:

因此，您可以使用 jQuery 的.data()方法或普通的 JavaScript：

Sample HTML

示例 HTML

<div id="some-data" data-name="Tom"></div>

Javascript

Javascript

var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);

jQuery

jQuery

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

回答by Spudley

Not only does IE6 not support the HTML5 Data Attribute feature, in fact virtually nocurrent browser supports them! The only exception at the moment is Chrome.

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

You are perfectly at liberty to use data-geoff="geoff de geoff"as an attribute, but only Chrome of the current browser versions will give you the .dataGeoffproperty.

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

Fortunately, allcurrent browsers - including IE6 - can reference unknown attributes using the standard DOM .getAttribute()method, so .getAttribute("data-geoff")will work everywhere.

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

In the very near future, new versions of Firefox and Safari will start to support the data attributes, but given that there's a perfectly good way of accessessing it that works in all browsers, then there's really no reason to be using the HTML5 method that will only work for some of your visitors.

在不久的将来，新版本的 Firefox 和 Safari 将开始支持 data 属性，但鉴于有一种完美的访问方式，适用于所有浏览器，那么真的没有理由使用 HTML5 方法仅适用于您的某些访问者。

You can see more about the current state of support for this feature at CanIUse.com.

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

Hope that helps.

希望有帮助。

回答by Timores

I think IE has always supported this (at least starting from IE4) and you can access them from JS. They were called 'expando properties'. See old MSDN article

我认为 IE 一直支持这个（至少从 IE4 开始）并且您可以从 JS 访问它们。它们被称为“扩展属性”。请参阅旧的 MSDN 文章

This behaviour can be disabled by setting the expando propertyto false on a DOM element (it's true by default, so the expando propertieswork by default).

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

Edit: fixed the URL

编辑：修复了 URL

回答by user1767210

If you wanted to retrieve all of the custom data attributes at once like the dataset property in newer browsers, you could do the following. This is what I did and works great for me in ie7+.

如果您想在较新的浏览器中像数据集属性一样一次性检索所有自定义数据属性，您可以执行以下操作。这就是我在 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;
}

回答by HTML5 developer

In IE6, it may not work. For reference: MSDN

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

I suggest using jQuery to handle most of the cases:

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

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

Try this in your coding.

在你的编码中试试这个。