HTML5自定义数据属性在 IE6中“工作”吗？

自定义数据属性: 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);

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

71849 次浏览
小开

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

可以通过在 DOM 元素上将扩展 财产设置为 false 来禁用此行为(默认情况下为 true，因此在默认情况下扩展 物业可以工作)。

编辑: 修复 URL

小开
最佳答案

您可以使用 getAttribute检索自定义(或您自己的)属性的值

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

我可以使用

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

参见 MSDN。虽然这里提到你需要 IE7来让它工作，但是我之前在 IE6上测试过，它运行正常(甚至在怪异模式下)。

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

小开

是的，他们工作。

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");
小开

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

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

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

在不久的将来，Firefox 和 Safari 的新版本将开始支持数据属性，但是考虑到有一个非常好的方法可以在所有浏览器中使用，那么就没有理由使用只对部分访问者有效的 HTML5方法。

您可以在 CanIUse.com上看到更多关于这个特性的当前支持状态的信息。

希望能帮上忙。

小开

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

在 IE6，它可能不工作。参考: MSDN

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

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

在你的代码中试试这个。


提交答案