自定义数据属性: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在现代浏览器中仍未定义,因此两者均不受支持。 />
jeffth的jeffth,十九个jeffty-jeff。

@ANeves:虽然它允许使用非标识符字符访问属性,但由于浏览器不会将“ data-geoff” HTML属性与DOM中相同名称的属性相连接,因此此处不适用。 br />

#1 楼

您可以使用getAttribute检索自定义(或您自己)属性的值。按照您的示例使用

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


我可以使用

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


来获取data-geoff的值。请参见MSDN。尽管那里提到需要IE7才能使它正常工作,但我还是在IE6上对其进行了测试,并且它可以正常运行(即使在怪癖模式下也是如此)。

但是与这无关当然,HTML5特定的属性。

评论


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

– Paul D. Waite
10 Mar 9 '10在23:05

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

–托马斯·鲍威尔(Thomas Powell)
10 Mar 10 '10 at 21:42

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

– Paul D. Waite
10 Mar 10 '10在22:22

实际上,令我惊讶的是,这个答案仍然获得了如此多的赞誉,尤其是根据许多Web开发人员的说法,IE 6应该被视为“死胡同”。

– Marcel Korpel
11年7月22日在11:13

@Marcel:我认为仍有相当多的站点将IE 6作为其受众不可忽视的一部分。也许再过十年,我们就不必再担心了。

– Paul D. Waite
2011年9月8日在16:05

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


评论


这个答案似乎与canIuse有点冲突。是否支持为什么将其标记为“部分”的任何输入? caniuse.com/dataset

–?Snekse
2013年6月4日19:54

@Snekse我认为它与底部的注释有关。注意:所有浏览器都可以使用data- *属性,并可以使用getAttribute访问它们。 “支持”是指使用数据集属性访问值。当前的规范仅涉及对HTML元素的支持,只有某些浏览器也支持SVG / MathML元素。

– Marko
2013年6月4日22:51

@Marko
,在IE6中可以吗?您将如何读取该值?

–罗伊·纳米尔(Royi Namir)
15-10-28在12:46



@RoyiNamir我相信任何属性都可以,但是最好检查一下。我没有随身携带IE6。

– Marko
15年10月28日在21:02

我希望jQuery会消失

– SuperUberDuper
16年4月11日在12:50

#3 楼

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

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

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

不久的将来,新版本的Firefox和Safari将开始使用来支持数据属性,但是鉴于有一种在所有浏览器中都能很好地访问它的完美方法,那么实际上没有理由使用仅对某些访问者有效的HTML5方法。

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

希望有所帮助。

评论


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

– Paul D. Waite
2011-6-28在14:24

我明白您的观点,尽管没有理由使用数据集属性来访问它们-我不知道它应该比getAttribute提供什么好处。

– Paul D. Waite
2011年6月28日14:25



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

– Spudley
2011年6月28日15:15

#4 楼

我认为IE一直都支持此功能(至少从IE4开始),您可以从JS访问它们。它们被称为“扩展属性”。请参阅旧的MSDN文章

可以通过将DOM元素上的expando属性设置为false来禁用此行为(默认情况下为true,因此expando属性默认情况下起作用)。

编辑:修复了网址

评论


啊,是的,对不起,我不认为这是我想要的。刚刚编辑了问题以进行澄清。

– Paul D. Waite
2010-3-9在22:22

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

– Timores
10 Mar 9 '10在23:25

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

–愚蠢
10 Mar 10 '10 at 6:54

非常好,谢谢。也是一篇不错的文章,必须喜欢“欢迎使用DHTML Dude的第一篇专栏文章。”

– Paul D. Waite
10 Mar 10 '10 at 11:04

#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中,它确实可以工作(请参见接受的答案),而我并没有询问jQuery。

– Paul D. Waite
15年3月11日在10:44

@Paul D. Waite:对不起,我错误地拒绝了您的垃圾邮件标记。这看起来确实很可疑。

– BoltClock♦
2015年3月11日在11:02



@BoltClock:很好。该代码建议实际上是一个合理的建议,但新闻阅读器链接显然完全无关。

– Paul D. Waite
2015年3月11日12:37



那为什么四年后仍然在这里呢?

–丹
15年4月17日在15:07