Các thuộc tính dữ liệu tùy chỉnh HTML5 có hoạt động được không trong IE 6?

Thuộc tính dữ liệu tùy chỉnh: http://dev.w3.org/html5/spec/Overview.html#embpping-custom-non-visible-data

Khi tôi nói, hãy làm việc với nhau, ý tôi là, nếu tôi có HTML như thế này:

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

JavaScript sau đây:

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

sản xuất, trong IE 6, một cảnh báo với hệ thống Geoff de geoff 'trong đó?

Bạn có thể truy xuất các giá trị của các thuộc tính tùy chỉnh (hoặc của riêng bạn) bằng cách sử dụng getAttribute. Theo gương của bạn với

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

Tôi có thể nhận được giá trị của data-geoffviệc sử dụng

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

Xem MSDN . Và mặc dù có đề cập rằng bạn cần IE7 để hoạt động, tôi đã thử nghiệm điều này một thời gian trước với IE6 và nó hoạt động chính xác (ngay cả trong chế độ quirks).

Nhưng điều này không liên quan gì đến các thuộc tính dành riêng cho HTML5, tất nhiên.

Vâng, họ làm việc.

IE đã hỗ trợ getAttribute()từ IE4, đó là những gì jQuery sử dụng nội bộ data().

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

Vì vậy, bạn có thể sử dụng .data()phương thức của jQuery hoặc JavaScript vanilla đơn giản:

HTML mẫu

<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 không chỉ không hỗ trợ tính năng Thuộc tính dữ liệu HTML5, trên thực tế hầu như không có trình duyệt hiện tại nào hỗ trợ chúng! Ngoại lệ duy nhất tại thời điểm này là Chrome.

Bạn hoàn toàn tự do sử dụng data-geoff="geoff de geoff"như một thuộc tính, nhưng chỉ Chrome của các phiên bản trình duyệt hiện tại mới cung cấp cho bạn .dataGeofftài sản.

May mắn thay, tất cả các trình duyệt hiện tại - bao gồm IE6 - có thể tham chiếu các thuộc tính không xác định bằng .getAttribute()phương thức DOM tiêu chuẩn , do đó .getAttribute("data-geoff")sẽ hoạt động ở mọi nơi.

Trong tương lai rất gần, các phiên bản mới của Firefox và Safari sẽ bắt đầu hỗ trợ các thuộc tính dữ liệu, nhưng do có một cách hoàn toàn tốt để truy cập nó hoạt động trong tất cả các trình duyệt, nên thực sự không có lý do gì để sử dụng phương thức HTML5 sẽ chỉ làm việc cho một số khách truy cập của bạn.

Bạn có thể xem thêm về trạng thái hỗ trợ hiện tại cho tính năng này tại CanIUse.com .

Mong rằng sẽ giúp.

Tôi nghĩ IE đã luôn hỗ trợ điều này (ít nhất là bắt đầu từ IE4) và bạn có thể truy cập chúng từ JS. Chúng được gọi là "thuộc tính mở rộng". Xem bài viết MSDN cũ

Hành vi này có thể bị vô hiệu hóa bằng cách thiết lập expando tài sản false trên một phần tử DOM (đó là sự thật theo mặc định, vì vậy expando thuộc tính làm việc theo mặc định).

Chỉnh sửa: đã sửa URL

Nếu bạn muốn truy xuất tất cả các thuộc tính dữ liệu tùy chỉnh cùng một lúc như thuộc tính bộ dữ liệu trong các trình duyệt mới hơn, bạn có thể thực hiện các thao tác sau. Đây là những gì tôi đã làm và làm việc tuyệt vời cho tôi trong eg7 +.

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

Trong IE6 , nó có thể không hoạt động. Để tham khảo: MSDN

Tôi đề nghị sử dụng jQuery để xử lý hầu hết các trường hợp:

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

Hãy thử điều này trong mã hóa của bạn.