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

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

Answer 1

您可以使用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特定的属性无关。

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数据属性功能，实际上没有当前浏览器支持它们！目前唯一的例外是Chrome。

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

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

在不久的将来，新版本的Firefox和Safari将开始支持数据属性，但鉴于有一种非常好的方法可以在所有浏览器中访问它，那么实际上没有理由使用HTML5该方法仅适用于部分访问者。

您可以在CanIUse.com详细了解此功能的当前支持状态。

希望有所帮助。

Answer 4

我认为IE总是支持这个（至少从IE4开始），你可以从JS访问它们。他们被称为'expando properties'。见old MSDN article

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

修改：修复了网址

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

在编码中试试这个。

IE5中的HTML5自定义数据属性是否“正常”？

6 个答案: