Apakah HTML5 atribut data "bekerja" di IE 6?

Atribut data khusus: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Ketika saya mengatakan "bekerja", maksud saya, jika saya punya HTML seperti ini:

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

akankah JavaScript berikut ini:

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

menghasilkan, di IE 6, peringatan dengan "geoff de geoff" di dalamnya?

Anda dapat mengambil nilai atribut kustom (atau milik Anda) menggunakan getAttribute. Mengikuti contoh Anda dengan

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

Saya bisa mendapatkan nilai data-geoffmenggunakan

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

Lihat MSDN . Dan meskipun disebutkan di sana bahwa Anda perlu IE7 untuk mendapatkan ini berfungsi, saya mengujinya beberapa saat yang lalu dengan IE6 dan berfungsi dengan benar (bahkan dalam mode kebiasaan).

Tapi ini tidak ada hubungannya dengan atribut khusus HTML5, tentu saja.

Ya, mereka bekerja.

IE telah mendukung getAttribute()dari IE4 yang digunakan jQuery secara internal data().

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

Jadi Anda bisa menggunakan .data()metode jQuery atau JavaScript vanilla biasa:

Contoh 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 tidak hanya tidak mendukung fitur Atribut Data HTML5, bahkan sebenarnya tidak ada browser saat ini yang mendukungnya! Satu-satunya pengecualian saat ini adalah Chrome.

Anda bebas menggunakan data-geoff="geoff de geoff"sebagai atribut, tetapi hanya Chrome versi browser saat ini yang akan memberi Anda .dataGeoffproperti.

Untungnya, semua browser saat ini - termasuk IE6 - dapat mereferensikan atribut yang tidak diketahui menggunakan .getAttribute()metode DOM standar , sehingga .getAttribute("data-geoff")akan bekerja di mana saja.

Dalam waktu dekat, versi baru Firefox dan Safari akan mulai mendukung atribut data, tetapi mengingat bahwa ada cara yang sangat baik untuk mengaksesnya yang bekerja di semua browser, maka benar-benar tidak ada alasan untuk menggunakan metode HTML5 yang akan hanya berfungsi untuk beberapa pengunjung Anda.

Anda dapat melihat lebih lanjut tentang kondisi dukungan saat ini untuk fitur ini di CanIUse.com .

Semoga itu bisa membantu.

Saya pikir IE selalu mendukung ini (setidaknya mulai dari IE4) dan Anda dapat mengaksesnya dari JS. Mereka disebut 'properti diperluas'. Lihat artikel MSDN lama

Perilaku ini dapat dinonaktifkan dengan menyetel properti ekspansi ke false pada elemen DOM (itu benar secara default, sehingga properti Expando bekerja secara default).

Edit: memperbaiki URL

Jika Anda ingin mengambil semua atribut data khusus sekaligus seperti properti dataset di browser yang lebih baru, Anda bisa melakukan hal berikut. Inilah yang saya lakukan dan bekerja bagus untuk saya di 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;
}

Di IE6 , itu mungkin tidak berfungsi. Untuk referensi: MSDN

Saya sarankan menggunakan jQuery untuk menangani sebagian besar kasus:

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

Coba ini di coding Anda.