[英]Do HTML5 custom data attributes “work” in IE 6?
Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data 自定义数据属性: http : //dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data
When I say “work”, I mean, if I've got HTML like this: 当我说“工作”时,我的意思是,如果我有这样的HTML:
<div id="geoff" data-geoff="geoff de geoff">
will the following JavaScript: 将以下JavaScript:
var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);
produce, in IE 6, an alert with “geoff de geoff” in it? 在IE 6中产生带有“ geoff de geoff”的警报吗?
You can retrieve values of custom (or your own) attributes using getAttribute
. 您可以使用getAttribute
检索自定义(或您自己)属性的值。 Following your example with 按照您的示例
<div id="geoff" data-geoff="geoff de geoff">
I can get the value of data-geoff
using 我可以使用获得data-geoff
的价值
var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));
See MSDN . 参见MSDN 。 And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode). 尽管这里提到需要IE7才能使它正常工作,但我前一段时间还是使用IE6对其进行了测试,并且它可以正常运行(即使在怪癖模式下)。
But this has nothing to do with HTML5-specific attributes, of course. 但这当然与HTML5特定的属性无关。
Yes, they work. 是的,他们工作。
IE has supported getAttribute()
from IE4 which is what jQuery uses internally for data()
. IE支持IE4中的getAttribute()
,这是jQuery内部用于data()
。
data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js
So you can either use jQuery's .data()
method or plain vanilla JavaScript: 因此,您可以使用jQuery的.data()
方法或普通的JavaScript:
Sample HTML 范例HTML
<div id="some-data" data-name="Tom"></div>
Javascript Java脚本
var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);
jQuery jQuery的
var name = $("#some-data").data("name");
Not only does IE6 not support the HTML5 Data Attribute feature, in fact virtually no current browser supports them! IE6不仅不支持HTML5数据属性功能,实际上,当前没有浏览器支持它们! The only exception at the moment is Chrome. 目前唯一的例外是Chrome。
You are perfectly at liberty to use data-geoff="geoff de geoff"
as an attribute, but only Chrome of the current browser versions will give you the .dataGeoff
property. 您可以data-geoff="geoff de geoff"
使用data-geoff="geoff de geoff"
作为属性,但是只有当前浏览器版本的Chrome才会为您提供.dataGeoff
属性。
Fortunately, all current browsers - including IE6 - can reference unknown attributes using the standard DOM .getAttribute()
method, so .getAttribute("data-geoff")
will work everywhere. 幸运的是,当前所有的浏览器(包括IE6)都可以使用标准DOM .getAttribute()
方法引用未知属性,因此.getAttribute("data-geoff")
可以在任何地方使用。
In the very near future, new versions of Firefox and Safari will start to support the data attributes, but given that there's a perfectly good way of accessessing it that works in all browsers, then there's really no reason to be using the HTML5 method that will only work for some of your visitors. 在不久的将来,新版本的Firefox和Safari将开始支持数据属性,但是鉴于存在一种在所有浏览器中均可正常访问的好方法,因此,实际上没有理由使用HTML5方法仅适用于某些访问者。
You can see more about the current state of support for this feature at CanIUse.com . 您可以在CanIUse.com上了解有关此功能当前支持状态的更多信息。
Hope that helps. 希望能有所帮助。
I think IE has always supported this (at least starting from IE4) and you can access them from JS. 我认为IE一直都支持此功能(至少从IE4开始),您可以从JS访问它们。 They were called 'expando properties'. 它们被称为“扩展属性”。 See old MSDN article 参见旧的MSDN文章
This behaviour can be disabled by setting the expando property to false on a DOM element (it's true by default, so the expando properties work by default). 可以通过将DOM元素上的expando 属性设置为false来禁用此行为(默认情况下为true,因此expando 属性默认情况下起作用)。
Edit: fixed the URL 编辑:修复URL
If you wanted to retrieve all of the custom data attributes at once like the dataset property in newer browsers, you could do the following. 如果要一次检索所有自定义数据属性(如较新的浏览器中的数据集属性),则可以执行以下操作。 This is what I did and works great for me in ie7+. 这就是我所做的,并且在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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.