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

Question

当我说"工作"时,我的意思是,如果我有这样的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已经getAttribute()从IE4 支持这是jQuery内部使用的data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

所以你可以使用jQuery的.data()方法或简单的vanilla 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");

@Snekse我相信它与底部的注释有关.注意:所有浏览器都可以使用data-*属性并使用getAttribute访问它们."支持"是指使用dataset属性访问值.当前规范仅涉及对HTML元素的支持,只有一些浏览器也支持SVG/MathML元素 (8认同)
这个答案似乎与canIuse有点冲突.有关为什么标记为"部分"支持的任何输入？http://caniuse.com/dataset (2认同)

Answer 3

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

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

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

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

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

希望有所帮助.

@Paul - 它没有提供任何优于getAttribute的优势.它提供了一种标准化的方法来处理使用属性对标记存储数据.这一直有效,但在HTML5之前从未成为官方标准.HTML5只是采用了现有的非标准但广泛使用的功能并批准了它,添加了一些规则来说明如何命名它们,并定义一种新的访问方式.当我说它不受支持时,我明确指的是`.dataXYZ`属性; 正如你所说,基本功能得到广泛支持,但不是因为它是HTML5. (2认同)

Answer 4

我认为IE总是支持这个(至少从IE4开始),你可以从JS访问它们.他们被称为'expando properties'.请参阅旧的MSDN文章

可以通过在DOM元素上将expando 属性设置为false 来禁用此行为(默认情况下为true,因此默认情况下expando 属性有效).

编辑:修复了网址