Javascript 做HTML5自定义数据属性“；工作”；在IE 6中？

自定义数据属性：

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

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

---

在IE6中生成一个带有“geoff de geoff”的警报？

我认为IE一直支持这一点（至少从IE4开始），您可以从JS访问它们。它们被称为“expando properties”。看

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

---

编辑：修复了URL

您可以使用

getAttribute

检索自定义（或您自己的）属性的值。以你为例

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

看。尽管有人提到需要IE7才能让它工作，但我不久前用IE6测试了它，它运行正常（即使在怪癖模式下）

---

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

是的，它们是有效的。

IE支持IE4中的

getAttribute（）

，这是jQuery内部用于

data（）

的

因此，您可以使用jQuery的

.data（）

方法或普通JavaScript：

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

示例HTML

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

jQuery

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

---

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

您完全可以自由使用

data geoff=“geoff de geoff”

作为属性，但只有当前浏览器版本的Chrome才会为您提供

.dataGeoff

属性

幸运的是，包括IE6在内的所有当前浏览器都可以使用标准的DOM

.getAttribute（）

方法引用未知属性，因此

.getAttribute（“data geoff”）

将在任何地方都可以使用

在不久的将来，Firefox和Safari的新版本将开始支持数据属性，但考虑到有一种在所有浏览器中都能使用的访问数据的完美方式，那么就没有理由使用HTML5方法，这种方法只适用于部分访问者

有关此功能当前支持状态的更多信息，请访问

---

希望这会有所帮助。

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

函数getDataSet（节点）{ 变量数据集={}； var attrs=node.attributes； 对于（变量i=0；i在IE6中，它可能无法工作。供参考：

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

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

---

在你的编码中试试这个。

HTML5和IE6？恐怖。。。注意，

data geoff

由于“-”字符而不是有效的JS标识符。您需要在脚本中使用

dataGeoff

。@outis：根据规范（草案），您的意思是？我自己在FF3.6和Chromium 5.0.307.11中对此进行了测试，并检索了

geoff。dataGeoff

不起作用。原来（）应该是

geoff.dataset.geoff

，但在现代浏览器中，

element.dataset

仍然是

未定义的

，这两种浏览器都不支持。jeffth的jeffth，十九jeffty jeff。@ANeves:虽然允许使用非标识符字符访问属性，它在这里不适用，因为浏览器不会将“data geoff”HTML属性与DOM中的同名属性连接起来。啊，是的，对不起，我不认为这是我想要的。我只是编辑了这个问题来澄清。对不起，链接错了。它解释了如何禁用此行为，而不是解释功能。我已经修复了链接和文本。getAttribute可以跨浏览器工作，无需依赖IE的怪癖。非常好，谢谢。这篇文章也不错，一定很喜欢“欢迎来到第一个DHTML Dude专栏”。总之，这不是对HTML5数据属性的实际支持。这听起来像是一种利用它们的方式。纠正这不支持将数据放入集合或其他任何东西的API（没有人支持这一点是的）。但是，如get/Set Attribute所示，您可以在任何具有最小DOM意识的浏览器中立即获得数据属性的主要用途。如果你很想制作丢失的集合，你也可以使用猴子补丁浏览器。从我最近的一本书实验中可以清楚地看出，数据属性现在是可用的，并且远远优于当前常用的重载类属性值以包含样式信息和随机元数据的方案。“如果您非常倾向于创建缺少的集合，您可能还可以使用猴子补丁浏览器。”-是的，与CSS相比，JavaScript有一个好处：因为它是一种编程语言，你可以自己解决兼容性问题。事实上，我很惊讶这个答案仍然获得如此多的赞誉，特别是当IE 6应该被认为是“死”的时候，根据许多网络开发人员的说法。@Marcel：我认为相当多的网站仍然有IE6作为其受众中不可忽视的一部分。也许再过10年，我们就不必再担心了。“IE6不仅不支持HTML5数据属性功能，事实上，目前几乎没有浏览器支持它们”——当然，尽管这取决于你对“支持”的定义。没有浏览器支持

dataset

属性，但所有浏览器都允许您将数据存储在前缀为

data-

的属性中，并（如您所说）通过

getAttribute

检索数据。从某种意义上说，它们支持这个特性，因为你可以有效地使用属性本身

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

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

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