在IE 6中做HTML5自定义数据属性“工作”?
自定义数据属性: 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”的警报?
您可以使用getAttribute
检索自定义(或您自己的)属性的值。 跟着你的例子
<div id="geoff" data-geoff="geoff de geoff">
我可以使用data-geoff
的值
var geoff = document.getElementById("geoff"); alert(geoff.getAttribute("data-geoff"));
请参阅MSDN 。 虽然在那里提到你需要IE7才能使这个工作,我前一段时间用IE6testing了它,并且它正常工作(即使在怪癖模式)。
但是,这与HTML5特有的属性无关。
是的,他们工作。
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");
IE6不仅不支持HTML5数据属性function,实际上目前的浏览器都不支持它们! 目前唯一的例外是Chrome。
您完全可以使用data-geoff="geoff de geoff"
作为属性,但只有当前浏览器版本的Chrome会为您提供.dataGeoff
属性。
幸运的是, 所有当前浏览器(包括IE6)都可以使用标准的DOM .getAttribute()
方法引用未知的属性,所以.getAttribute("data-geoff")
可以在任何地方工作。
在不久的将来,Firefox和Safari的新版本将开始支持数据属性,但考虑到在所有浏览器中都有一个非常好的访问方法,那么真的没有理由使用HTML5方法只为你的一些访问者工作。
您可以在CanIUse.com上查看有关此function支持的更多信息。
希望有所帮助。
我认为IE一直支持这个(至less从IE4开始),你可以从JS访问它们。 他们被称为“expando属性”。 请参阅旧的MSDN文章
可以通过在DOM元素上将expando 属性设置为false来禁用此行为(默认情况下为true,因此expando 属性默认工作)。
编辑:修复了url
如果您想像新版浏览器中的数据集属性一样检索所有自定义数据属性,则可以执行以下操作。 这就是我所做的,在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; }
在IE6中 ,它可能无法正常工作。 供参考: MSDN
我build议使用jQuery来处理大部分情况:
var geoff = $("#geoff").data("data-geoff"); alert(geoff);
在你的编码中试试这个。