做HTML5定义的数据属性"工作"在即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);

产生，即6,警报与"geoff de杰夫"在吗？

Answer 1

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

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

我可以使用get data-geoff的值

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

请参阅 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数据属性的功能，其实无形中的没有的当前的浏览器支持他们！此刻唯一的例外是铬。

您是完全自由地使用data-geoff="geoff de geoff"作为一个属性，但只有当前的浏览器版本的Chrome浏览器会给你.dataGeoff属性。

幸运的是，所有的当前的浏览器 - 包括IE6 - 可以使用标准DOM .getAttribute()方法参考未知的属性，所以.getAttribute("data-geoff")将无处不在工作

在不久的将来，Firefox和Safari浏览器的新版本将开始支持数据的属性，但考虑到有accessessing它在所有浏览器上运行的一个非常好的方法，那么就真的没有理由要使用HTML5方法只会对一些访客的工作。

您可以看到更多关于此功能支持的当前状态为： CanIUse.com 。

希望有所帮助。

Answer 4

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

此行为可以通过设置的expando 属性到DOM元素上假（这是默认为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);

试试这个在你的编码。