HTML5自定义数据属性在IE 6中是否有效?


173

自定义数据属性: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”的警报吗?


117
HTML5和IE6?恐怖... O_o
Vivin Paliath 2010年

7
请注意,data-geoff由于有“-”字符,因此不是有效的JS标识符。您需要dataGeoff在脚本中使用。
2010年

3
@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现代浏览器中那样,不被支持。
马塞尔·科佩尔

7
jeffth的jeffth,十九个jeffty-jeff。
马特·萨赫

2
@ANeves:虽然它允许使用非标识符字符访问属性,但是它不适用于此处,因为浏览器不会将“ data-geoff” HTML属性与DOM中具有相同名称的属性联系在一起。
2012年

Answers:


153

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


4
总体而言,这并不是对HTML5数据属性的实际支持。听起来确实是一种利用它们的方法。
Paul D. Waite,2010年

正确的做法是不支持将数据放入集合或其他任何东西的数据API(没有人支持)。但是,如get / Set Attribute所示,您可以在任何对DOM的了解最少的浏览器中立即获得data-attribute的主要用途。如果您倾向于遗漏缺少的集合,则可能还可以猴子补丁浏览器。从我最近的书中的实验中可以明显看出,数据属性现在可以使用,并且远远优于当前的重载类属性值以包含样式信息和随机元数据的通用方案。
Thomas Powell

“如果您倾向于遗漏丢失的集合,那么您也可能会猴子补丁浏览器。” —是的,与CSS相比,这是JavaScript的优点:因为它是一种编程语言,所以您可以自己解决兼容性问题。
Paul D. Waite,2010年

实际上,令我惊讶的是,这个答案仍然获得了如此多的赞誉,特别是因为许多Web开发人员认为IE 6应该被视为“死胡同”。
马塞尔·科佩尔

6
@Marcel:我认为相当多的站点仍然将IE 6作为其受众不可忽视的一部分。也许再过十年,我们就不必再担心了。
Paul D. Waite
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.