คุณลักษณะข้อมูลที่กำหนดเองของ HTML5“ ทำงาน” ใน IE 6 หรือไม่

แอตทริบิวต์ข้อมูลที่กำหนดเอง: 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 เมื่อไม่นานมานี้และทำงานได้อย่างถูกต้อง (แม้ในโหมด quirks)

แต่สิ่งนี้ไม่เกี่ยวข้องกับคุณลักษณะเฉพาะของ HTML5 แน่นอน

ใช่พวกเขาทำงาน

IE ได้รับการสนับสนุนgetAttribute()จาก IE4 ซึ่งเป็นสิ่งที่ jQuery data()ใช้ภายในสำหรับ

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

ดังนั้นคุณสามารถใช้.data()วิธีการของ jQuery หรือ JavaScript แบบธรรมดา:

ตัวอย่าง HTML

<div id="some-data" data-name="Tom"></div>

จาวาสคริ

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

jQuery

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

ไม่เพียง แต่ IE6 จะไม่รองรับคุณสมบัติ HTML5 Data Attribute แต่ในความเป็นจริงไม่มีเบราว์เซอร์ปัจจุบันที่รองรับมัน! ข้อยกเว้นเพียงอย่างเดียวในขณะนี้คือ Chrome

คุณมีอิสระอย่างสมบูรณ์ที่จะใช้data-geoff="geoff de geoff"เป็นแอตทริบิวต์ แต่ Chrome ของเบราว์เซอร์รุ่นปัจจุบันเท่านั้นที่จะให้.dataGeoffคุณสมบัติแก่คุณ

โชคดีที่เบราว์เซอร์ปัจจุบันทั้งหมดรวมถึง IE6 สามารถอ้างอิงคุณสมบัติที่ไม่รู้จักโดยใช้.getAttribute()วิธีDOM มาตรฐานดังนั้น.getAttribute("data-geoff")จะทำงานได้ทุกที่

ในอนาคตอันใกล้นี้ Firefox และ Safari เวอร์ชันใหม่จะเริ่มให้การสนับสนุนคุณสมบัติของข้อมูล แต่เนื่องจากมีวิธีที่ดีในการเข้าถึงมันที่ใช้งานได้กับเบราว์เซอร์ทั้งหมดดังนั้นจึงไม่มีเหตุผลที่จะใช้วิธี HTML5 ที่จะ ใช้งานได้เฉพาะกับผู้เข้าชมบางส่วนเท่านั้น

ท่านสามารถดูรายละเอียดเพิ่มเติมเกี่ยวกับสถานะปัจจุบันของการสนับสนุนสำหรับคุณลักษณะนี้ที่CanIUse.com

หวังว่าจะช่วย

ฉันคิดว่า IE สนับสนุนเสมอ (อย่างน้อยเริ่มต้นจาก IE4) และคุณสามารถเข้าถึงได้จาก JS พวกเขาถูกเรียกว่า 'คุณสมบัติ expando' ดูบทความ MSDN เก่า

พฤติกรรมนี้สามารถปิดใช้งานได้โดยการตั้งค่าคุณสมบัติ expando เป็น false ในองค์ประกอบ DOM (เป็นค่าเริ่มต้นดังนั้นคุณสมบัติของ 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);

ลองสิ่งนี้ในการเขียนโค้ดของคุณ