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

2020/10/23 03:21 · javascript ·  · 0评论

自定义数据属性: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才能使它正常工作,但我不久前使用IE6对其进行了测试,并且它可以正常运行(即使在怪癖模式下)。

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

是的,他们工作。

IE支持getAttribute()IE4,这是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>

Java脚本

var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);

jQuery的

var name = $("#some-data").data("name");

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

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

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

在不久的将来,新版本的Firefox和Safari将开始支持数据属性,但是鉴于存在一种在所有浏览器中均可正常访问的好方法,因此实际上没有理由使用HTML5方法仅适用于某些访问者。

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

希望能有所帮助。

我认为IE一直都支持此功能(至少从IE4开始),您可以从JS访问它们。它们被称为“扩展属性”。参见旧的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

我建议使用jQuery处理大多数情况:

var geoff = $("#geoff").data("data-geoff");
alert(geoff);

在您的编码中尝试此操作。

本文地址:http://javascript.askforanswer.com/html5zidingyishujushuxingzaiie-6zhongshifouyouxiao.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!