سؤال

سمات البيانات المخصصة: http://dev.w3.org/html5/spec/overview.html#embledding-custom-n-visible-data.

عندما أقول "العمل"، أقصد، إذا حصلت على HTML مثل هذا:

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

سوف جافا سكريبت التالية:

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

إنتاج، في IE 6، تنبيه مع "جيف دي جيف" في ذلك؟

هل كانت مفيدة؟

المحلول

يمكنك استرداد قيم السمات المخصصة (أو الخاصة بك) باستخدام 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 الخاصة، بالطبع.

نصائح أخرى

نعم انهم يعملون.

أي دعم getAttribute() من IE4 وهو ما يستخدمه jQuery داخليا data().

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

حتى تتمكن من استخدام jQuery's .data() طريقة أو عادي الفانيليا جافا سكريبت:

عينة 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-geoff="geoff de geoff" كنسب، ولكن فقط Chrome من إصدارات المتصفح الحالية سوف تعطيك .dataGeoff خاصية.

لحسن الحظ، الكل المتصفحات الحالية - بما في ذلك IE6 - يمكن الرجوع إلى سمات غير معروفة باستخدام DOM القياسية .getAttribute() طريقة، لذلك .getAttribute("data-geoff") سوف تعمل في كل مكان.

في المستقبل القريب جدا، ستبدأ الإصدارات الجديدة من Firefox و Safari في دعم سمات البيانات، ولكن بالنظر إلى وجود طريقة جيدة تماما للوصول إليها تعمل في جميع المتصفحات، فلا يوجد سبب حقا لاستخدام طريقة HTML5 التي سوف العمل فقط لبعض زوارك.

يمكنك أن ترى المزيد عن الحالة الحالية للدعم لهذه الميزة في caniuse.com..

امل ان يساعد.

أعتقد أن IE قد دعمت دائما هذا (ابتداء على الأقل من IE4) ويمكنك الوصول إليها من JS. كانوا يسمى "خصائص التوسيع". يرى MSDN القديمة

يمكن تعطيل هذا السلوك عن طريق تعيين OPTOO خاصية إلى False على عنصر DOM (صحيح بشكل افتراضي، لذلك التوسيع الخصائص العمل بشكل افتراضي).

تحرير: إصلاح عنوان URL

إذا كنت ترغب في استرداد جميع سمات البيانات المخصصة مرة واحدة مثل خاصية DataSet في المتصفحات الأحدث، فيمكنك القيام بما يلي. هذا ما فعلته ويعمل بشكل رائع بالنسبة لي في 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);

جرب هذا في الترميز الخاص بك.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top