HTML5 自定义数据属性在 IE 6 中是不是“有效”？

Posted 2023-03-05

【中文标题】HTML5 自定义数据属性在 IE 6 中是不是“有效”？

【英文标题】：Do HTML5 custom data attributes “work” in IE 6?HTML5 自定义数据属性在 IE 6 中是否“有效”？

【发布时间】：2011-01-25 15:47:18

【问题描述】：

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

【问题讨论】：

HTML5 和 IE6？恐怖... O_o

请注意，data-geoff 不是有效的 JS 标识符，因为“-”字符。您需要在脚本中使用dataGeoff。

@outis：根据规格（草稿），您是说？我自己在 FF 3.6 和 Chromium 5.0.307.11 中对此进行了测试，但检索 geoff.dataGeoff 没有用。事实证明 (whatwg.org/specs/web-apps/current-work/multipage/…) 它应该 是 geoff.dataset.geoff，但由于 element.dataset 在现代浏览器中仍然是 undefined，因此两者都不支持。

杰夫的杰夫，十九杰夫-杰夫。

@ANeves：虽然这允许访问具有非标识符字符的属性，但它不适用于此处，因为浏览器不会桥接“data-geoff”HTML 属性与属性DOM 中的同名。

【参考方案1】：

我认为 IE 一直支持这个（至少从 IE4 开始），你可以从 JS 访问它们。它们被称为“扩展属性”。见old MSDN article

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

编辑：修正网址

【讨论】：

啊，是的，抱歉，我认为这不是我想要的。刚刚编辑了问题以澄清。

我很抱歉，链接错误。它解释了如何禁用此行为而不是解释该功能。我已经修复了链接和文本。

getAttribute 跨浏览器工作，这里不需要依赖 IE 怪癖。

太好了，谢谢。文章也不错，一定要喜欢“欢迎来到第一个 DHTML Dude 专栏”。

【参考方案2】：

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

【讨论】：

总的来说，这并不是对 HTML5 数据属性的实际支持。不过听起来确实像是一种利用它们的方法。

更正这不支持将事物放入集合或其他任何东西的数据API（没有人支持这个是的）。但是，如 get/Set Attribute 所示，您可以在任何最低限度的 DOM 感知浏览器中立即获得 data- 属性的主要用途。如果您如此倾向于制作丢失的集合，您可能还可以修补浏览器。从我最近的书籍实验中可以清楚地看出，数据属性现在可以使用，并且远远优于当前重载类属性值以包含样式信息和随机元数据的常见方案。

“如果您如此倾向于制作丢失的集合，您可能还可以修补浏览器。” — 是的，这就是 JavaScript 与 CSS 相比的优点：因为它是一种编程语言，你可以自己解决兼容性问题。

我真的很惊讶这个答案仍然得到如此多的赞誉，特别是根据许多 Web 开发人员的说法，IE 6 应该被认为是“死的”。

@Marcel：我认为相当多的网站仍然将 IE 6 作为其受众中不可忽视的一部分。也许在另一个 10年后我们就不用再担心了。

【参考方案3】：

是的，它们有效。

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

【讨论】：

这个答案似乎与 canIuse 有点冲突。关于为什么它被标记为“部分”支持的任何输入？ caniuse.com/dataset

@Snekse 我相信它与底部的注释有关Note: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.

@Marko <div lala="Tom"></div> 怎么样，在 IE6 中可以吗？您将如何读取该值？

@RoyiNamir 我相信它应该适用于任何属性，但你最好检查一下。我在任何地方都没有 IE6。

我希望 jquery 能消失

【参考方案4】：

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

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

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

在不久的将来，新版本的 Firefox 和 Safari 将开始支持 data 属性，但鉴于有一种非常好的访问它的方法适用于所有浏览器，那么真的没有理由使用 HTML5仅对部分访问者有效的方法。

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

希望对您有所帮助。

【讨论】：

“IE6 不仅不支持 HTML5 数据属性功能，事实上当前几乎没有浏览器支持它们”——当然，尽管这取决于您对“支持”的定义。没有浏览器支持dataset 属性，但是所有浏览器都允许您将数据存储在前缀为data- 的属性中，并且（如您所说）通过getAttribute 检索它。因此，从某种意义上说，它们支持该功能，因为您可以有效地使用这些属性本身。

我明白你关于没有理由使用 dataset 属性来访问它们的观点 - 我不知道它应该比 getAttribute 提供什么好处。

@Paul -- 它没有提供任何优于 getAttribute 的优势。它提供的是一种标准化的方式来处理使用属性针对标签存储数据。这一直有效，但直到 HTML5 才成为官方标准。 HTML5 简单地采用了现有的非标准但广泛使用的特性并对其进行了批准，添加了一些规则来说明您应该如何命名它们，并定义了一种访问它们的新方法。当我说它不受支持时，我明确指的是.dataXYZ 属性；正如您所说，基本功能得到广泛支持，但不是因为它是 HTML5。

【参考方案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;

【参考方案6】：

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

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

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

在你的编码中试试这个。

【讨论】：

在 IE6 中，它确实可以工作（参见 the accepted answer），而且我没有询问 jQuery。

@Paul D. Waite：抱歉，我错误地拒绝了你的垃圾邮件标记。这看起来很可疑。

@BoltClock：没关系。代码建议实际上是一个有点合理的，但新闻阅读器链接显然是完全无关的。

那为什么4年后还在这里？