HTML5 özel veri özellikleri IE 6'da “çalışıyor” mu?

Özel veri özellikleri: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

“İş” dediğimde, şöyle bir HTML varsa:

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

aşağıdaki JavaScript'i kullanır:

var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

IE 6, içinde "geoff de geoff" ile bir uyarı üretmek?

Tuşlarını kullanarak özel (veya kendi) öznitelik değerlerinizi alabilirsiniz getAttribute. İle örneğinizin ardından

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

data-geoffKullanmanın değerini alabilirim

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

Bkz. MSDN . Ve bu işe almak için IE7 gerekir belirtilmiş olmasına rağmen, bunu bir süre önce IE6 ile test ettim ve doğru çalışıyordu (hatta tuhaflık modunda).

Ancak bunun HTML5'e özgü özelliklerle hiçbir ilgisi yok elbette.

Evet, çalışıyorlar.

IE, getAttribute()jQuery'nin dahili olarak kullandığı IE4'ü destekledi data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

Böylece jQuery'nin .data()yöntemini veya düz vanilya JavaScript'ini kullanabilirsiniz:

Örnek 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 sadece HTML5 Veri Özniteliği özelliğini desteklemekle kalmaz, aslında mevcut tarayıcıların neredeyse hiçbirini desteklemez! Şu anda tek istisna Chrome.

data-geoff="geoff de geoff"Özellik olarak kullanmak için tamamen özgürsünüz , ancak özelliği yalnızca geçerli tarayıcı sürümlerinin Chrome'u size verecektir .dataGeoff.

Neyse ki, tüm mevcut tarayıcılar - IE6 dahil - standart DOM .getAttribute()yöntemini kullanarak bilinmeyen özelliklere başvurabilir , bu nedenle .getAttribute("data-geoff")her yerde çalışır.

Çok yakın bir gelecekte, Firefox ve Safari'nin yeni sürümleri veri özelliklerini desteklemeye başlayacak, ancak tüm tarayıcılarda çalışan mükemmel bir erişim yolu olduğu göz önüne alındığında, HTML5 yöntemini kullanmanın gerçekten bir nedeni yoktur. yalnızca bazı ziyaretçileriniz için çalışır.

CanIUse.com adresinde bu özelliğin mevcut destek durumu hakkında daha fazla bilgi bulabilirsiniz .

Umarım yardımcı olur.

Ben IE her zaman (en azından IE4 başlayarak) destekledi ve onlara JS erişebilirsiniz düşünüyorum. Onlara 'genişleme özellikleri' deniyordu. Bkz eski MSDN makalesine

Bu davranış, DOM öğesinde expando özelliği false olarak ayarlanarak devre dışı bırakılabilir (varsayılan olarak doğrudur, bu nedenle expando özellikleri varsayılan olarak çalışır).

Düzenle: URL düzeltildi

Daha yeni tarayıcılardaki veri kümesi özelliği gibi tüm özel veri özelliklerini bir kerede almak istiyorsanız, aşağıdakileri yapabilirsiniz. Yaptığım bu ve ie7 + benim için harika çalışıyor.

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;
}

In IE6 , bu çalışmayabilir. Referans için: MSDN

Ben çoğu durumda işlemek için jQuery kullanmanızı öneririz:

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

Kodunuzda bunu deneyin.