174

自定义数据属性：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”的警报？

4

6 回答 6

154

您可以使用 检索自定义（或您自己的）属性的值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 特定的属性无关。

于 2010-03-09T22:56:50.787 回答
141

是的，他们工作。

IE 支持getAttribute()IE4，这是 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");
于 2011-04-17T21:12:45.400 回答
9

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

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

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

在不久的将来，新版本的 Firefox 和 Safari 将开始支持数据属性，但鉴于有一种在所有浏览器中都可以使用的完美访问它的方法，那么真的没有理由使用 HTML5 方法。仅适用于您的部分访客。

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

希望有帮助。

于 2011-06-28T13:59:27.303 回答
7

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

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

编辑：固定网址

于 2010-03-09T22:13:07.417 回答
4

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

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

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

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

在你的编码中试试这个。

于 2015-03-11T09:12:38.700 回答