এইচটিএমএল 5 এ কি কাস্টম ডেটা বৈশিষ্ট্যগুলি "কাজ" করে?

Question

কাস্টম ডেটা বৈশিষ্ট্য: http://dev.w3.org/html5/spec/Overview.html#eebding-custom-non-visible-data

আমি যখন "কাজ" বলি, তার মানে আমি এইচটিএমএল পেয়ে থাকলে:

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

নিম্নলিখিত জাভাস্ক্রিপ্ট হবে:

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

আইই 6 এ উত্পাদন করুন, এতে "জিওফ ডি জিওফ" সহ একটি সতর্কতা রয়েছে?

Comments

এইচটিএমএল 5 এবং আই 6? ভয়াবহতা ...

— O_o

নোট করুন যে data-geoff"-" চরিত্রের কারণে কোনও বৈধ জেএস সনাক্তকারী নয়। আপনাকে dataGeoffস্ক্রিপ্টগুলি ব্যবহার করতে হবে ।

— outis

@ আউটিস: চশমা অনুসারে (খসড়া), মানে? আমি এফএফ 3.6 এবং ক্রোমিয়াম 5.0.307.11 এ এটি পরীক্ষা করেছি এবং পুনরুদ্ধার geoff.dataGeoffকাজ করে না। এটি প্রমাণিত হয়েছে ( whatswg.org/specs/web-apps/current-work/m মাল্টিপেজ/… ) এটি হওয়া উচিত geoff.dataset.geoff, তবে element.datasetএখনও undefinedআধুনিক ব্রাউজারগুলিতে রয়েছে, এটি উভয়ই সমর্থিত নয়।

— মার্সেল করপেল

জেফের জেফথ, উনিশ জেফ্টি-জেফ।

— ম্যাট শ্যাচ

@ এনিভস: এটির সাহায্যে শনাক্তকারী অক্ষরযুক্ত কোনও সম্পত্তি অ্যাক্সেস করার অনুমতি দেওয়ার পরে, এটি এখানে প্রয়োগ হয় না কারণ ব্রাউজারটি ডিওমে একই নামের একটি সম্পত্তি দিয়ে 'ডেটা-জিওফ' এইচটিএমএল বৈশিষ্ট্যটি ব্রিজ করতে পারে না।

— outis

Answer 1

আপনি কাস্টম (বা আপনার নিজস্ব) বৈশিষ্ট্য ব্যবহার করে মানগুলি পুনরুদ্ধার করতে পারেন getAttribute। আপনার উদাহরণ অনুসরণ করে

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

আমি data-geoffব্যবহারের মান পেতে পারি

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

এমএসডিএন দেখুন । যদিও এটি এখানে উল্লেখ করা হয়েছে যে এটি কাজ করতে আপনার আইআই 7 প্রয়োজন, আমি কিছুক্ষণ আগে আই 6 এর সাথে এটি পরীক্ষা করেছিলাম এবং এটি সঠিকভাবে কাজ করেছিল (এমনকি কুইর্কস মোডেও)।

তবে অবশ্যই এইচটিএমএল-নির্দিষ্ট বৈশিষ্ট্যগুলির সাথে কোনও সম্পর্ক নেই।

Comments

সামগ্রিকভাবে, এটি HTML5 ডেটা অ্যাট্রিবিউটগুলির প্রকৃত সমর্থন নয়। এগুলি যদিও ব্যবহারের উপায়ের মতো শোনাচ্ছে।

— পল ডি ওয়েট

সঠিক এটি কোনও সংগ্রহে জিনিসপত্র রাখার API বা সমর্থন করে না যা কিছু (এই হ্যাঁ কেউ সমর্থন করে না)। তবে, গেট / সেট অ্যাট্রিবিউট দ্বারা প্রদর্শিত হিসাবে আপনি যে কোনও ন্যূনতম ডিওএম সচেতন ব্রাউজারে তাত্ক্ষণিকভাবে ডেটা-অ্যাট্রিবিউটসের মূল ব্যবহার পেতে পারেন। আপনি যদি অনুপস্থিত সংগ্রহগুলি করতে আগ্রহী হন তবে আপনি সম্ভবত বানর প্যাচ ব্রাউজারগুলিও করতে পারেন। আমার সাম্প্রতিক বইয়ের পরীক্ষাগুলি থেকে এটি স্পষ্ট যে ডেটা-অ্যাট্রিবিউটগুলি এখন ব্যবহারযোগ্য এবং স্টাইলের তথ্য এবং এলোমেলো মেটা ডেটা ধারণ করতে ক্লাস অ্যাট্রিবিউট মানকে ওভারলোড করার বর্তমান প্রচলিত স্কিমের চেয়ে অনেক উন্নত।

— টমাস পাওয়েল

"আপনি যদি অনুপস্থিত সংগ্রহগুলি করতে আগ্রহী হন তবে আপনি সম্ভবত বাঁদর প্যাচ ব্রাউজারগুলিও করতে পারেন।" - হ্যাঁ, এটি CSS এর তুলনায় জাভাস্ক্রিপ্ট সম্পর্কে দুর্দান্ত জিনিস: কারণ এটি একটি প্রোগ্রামিং ভাষা, আপনি নিজেই সামঞ্জস্যের সমস্যাগুলি ঠিক করতে পারেন।

— পল ডি ওয়েট

আমি আসলেই অবাক হয়েছি এই উত্তরটি এখনও অনেক ক্রেডিট পায়, বিশেষত আইই 6 হিসাবে অনেক ওয়েব বিকাশকারীদের মতে "মৃত" হিসাবে বিবেচিত হওয়া উচিত।

— মার্সেল করপেল

@ মার্সেল: আমি মনে করি বেশ কয়েকটি সাইট এখনও তাদের শ্রোতার অ-উপেক্ষিত অংশ হিসাবে আইই 6 আছে। অন্য কোনওটিতে হতে পারে 10 বছরে আমাদের কোনও চিন্তা করতে হবে না।

— পল ডি ওয়েট

Answer 2

হ্যাঁ, তারা কাজ করে।

আইই আইই 4 getAttribute()থেকে সমর্থন করেছে যা jQuery অভ্যন্তরীণভাবে ব্যবহার করে data()।

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

সুতরাং আপনি হয় jQuery এর .data()পদ্ধতি বা সরল ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন :

নমুনা এইচটিএমএল

<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");

Comments

এই উত্তরটি ক্যানআইউজের সাথে কিছুটা দ্বন্দ্ব বলে মনে হচ্ছে। কেন এটি "আংশিক" হিসাবে চিহ্নিত হিসাবে কোনও ইনপুট সমর্থনযোগ্য? caniuse.com/dataset

— স্নেকস

@ স্নেকস আমি বিশ্বাস করি এটি নীচের নোটের সাথে সম্পর্কিতNote: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.

— মার্কো

@ মারকো কি সম্পর্কে <div lala="Tom"></div>, এটি আই 6 ঠিক আছে? আপনি কিভাবে মান পড়তে হবে?

— রই নমির

@ রোয়নিমির আমি বিশ্বাস করি এটি কোনও বৈশিষ্ট্যের সাথে ঠিকঠাক কাজ করা উচিত তবে আপনি সেরা পরীক্ষা করে দেখুন। আমার কোথাও আইই 6 সুবিধাজনক নেই।

— মার্কো 21

আমি আশা করি jquery কেবল চলে যাবে

— সুপারউবারডুপার

Answer 3

আইই 6 কেবল এইচটিএমএল 5 ডেটা অ্যাট্রিবিউট বৈশিষ্ট্যটিকে সমর্থন করে না, বাস্তবে কোনওটিই নয় বর্তমান ব্রাউজার তাদের সমর্থন করে না! এই মুহূর্তে একমাত্র ব্যতিক্রম ক্রোম।

data-geoff="geoff de geoff"অ্যাট্রিবিউট হিসাবে ব্যবহার করার জন্য আপনি পুরোপুরি স্বাধীনতায় রয়েছেন তবে কেবলমাত্র বর্তমান ব্রাউজার সংস্করণে ক্রোম আপনাকে দিবে.dataGeoff সম্পত্তি দেবে।

ভাগ্যক্রমে, সমস্ত বর্তমান ব্রাউজারগুলি - আই 6 সহ - স্ট্যান্ডার্ড ডিওএম .getAttribute()পদ্ধতি ব্যবহার করে অজানা বৈশিষ্ট্যগুলিকে উল্লেখ করতে পারে.getAttribute("data-geoff") সর্বত্র কাজ করবে।

খুব অদূর ভবিষ্যতে, ফায়ারফক্স এবং সাফারির নতুন সংস্করণগুলি ডেটা অ্যাট্রিবিউটকে সমর্থন করতে শুরু করবে, তবে এটি যে সমস্ত ব্রাউজারে কাজ করে তা অ্যাক্সেস করার উপযুক্ত উপায় আছে, তবে এইচটিএমএল 5 পদ্ধতি ব্যবহার করার কোনও কারণ নেই যে এটি কার্যকর করবে কেবলমাত্র আপনার দর্শকদের জন্য কাজ করুন।

আপনি CanIUse.com এ এই বৈশিষ্ট্যের জন্য সমর্থনের বর্তমান অবস্থার বিষয়ে আরও দেখতে পারেন ।

আশা করি এইটি কাজ করবে.

Comments

"আইই 6 কেবল এইচটিএমএল 5 ডেটা অ্যাট্রিবিউট বৈশিষ্ট্যকে সমর্থন করে না, বাস্তবে কোনও বর্তমান ব্রাউজার তাদের সমর্থন করে না" - নিশ্চিত, যদিও এটি "সমর্থন" এর সংজ্ঞা আপনার উপর নির্ভর করে। কোনও ব্রাউজার datasetসম্পত্তিটিকে সমর্থন করে না , তবে সমস্ত ব্রাউজার আপনাকে উপসর্গের উপাত্তের সাথে ডেটা সংরক্ষণ করার অনুমতি দেয় data-এবং (যেমন আপনি বলেন) এটির মাধ্যমে পুনরুদ্ধার করতে পারে getAttribute। সুতরাং এক অর্থে তারা বৈশিষ্ট্যটিকে সমর্থন করে, কারণ আপনি গুণাবলী নিজেরাই কার্যকরভাবে ব্যবহার করতে পারেন।

— পল ডি ওয়েট

আমি datasetসম্পত্তিটি অ্যাক্সেস করার জন্য তাদের ব্যবহার করার কোনও কারণ না থাকার বিষয়ে আপনার বক্তব্যটি দেখছি - এটির কী কী সুবিধা দেওয়া উচিত তা আমি জানি না getAttribute।

— পল ডি ওয়েট

@ পল - এটি getAttribute এর চেয়ে কোনও সুবিধা দেয় না। এটি যা দেয় তা হ'ল বৈশিষ্ট্যগুলি ব্যবহার করে কোনও ট্যাগের বিপরীতে ডেটা সংরক্ষণের মানক উপায় to এটি সর্বদা কাজ করেছে তবে এইচটিএমএল 5 অবধি কোনও সরকারী মান ছিল না। এইচটিএমএল 5 কেবল একটি বিদ্যমান অ-মানক তবে বহুল ব্যবহৃত বৈশিষ্ট্য নিয়েছে এবং এটির অনুমোদন দিয়েছে, আপনার নাম কীভাবে রাখা উচিত তা বলার জন্য কিছু বিধি যুক্ত করে এবং সেগুলিতে অ্যাক্সেসের একটি নতুন উপায় নির্ধারণ করে। যখন আমি বলি এটি সমর্থিত নয়, আমি স্পষ্টভাবে .dataXYZবৈশিষ্ট্যগুলি উল্লেখ করছি ; যেমনটি আপনি বলেছেন, মূল কার্যকারিতা ব্যাপকভাবে সমর্থিত, তবে এটি HTML5 নয়।

— স্পুডলি

Answer 4

আমি মনে করি IE সর্বদা এটি সমর্থন করেছে (কমপক্ষে আইই 4 থেকে শুরু করে) এবং আপনি এগুলি জেএস থেকে অ্যাক্সেস করতে পারেন। তাদের বলা হত 'প্রসারিত সম্পত্তি'। দেখা পুরাতন দুটিই MSDN নিবন্ধ

এই আচরণটি ডোম উপাদানটিতে মিথ্যাতে এক্সপেনডো সম্পত্তি সেট করে অক্ষম করা যেতে পারে (এটি ডিফল্টরূপে সত্য, সুতরাং বিস্তৃত বৈশিষ্ট্যগুলি ডিফল্টরূপে কাজ করে)।

সম্পাদনা: ইউআরএল স্থির করে

Comments

আহা, হ্যাঁ দুঃখিত, আমি মনে করি না যে আমি এটি বোধ করেছিলাম sense কেবল স্পষ্ট করার জন্য প্রশ্নটি সম্পাদনা করা হয়েছে।

— পল ডি ওয়েট

আমি দুঃখিত, আমি লিঙ্কটি ভুল ছিল। এটি বৈশিষ্ট্যটি ব্যাখ্যা করার পরিবর্তে কীভাবে এই আচরণটি অক্ষম করতে হবে তা ব্যাখ্যা করেছে। আমি লিঙ্ক এবং পাঠ্য স্থির করেছি।

— টিমোরস

getAttribute ক্রস ব্রাউজারে কাজ করে, এখানে IE quirks উপর নির্ভর করার প্রয়োজন নেই।

— বুদ্ধিমান

চমৎকার আপনাকে ধন্যবাদ. চমৎকার নিবন্ধটিও, ভালোবাসি "প্রথম ডিএইচটিএমএল ডুড কলামে আপনাকে স্বাগতম।"

— পল ডি ওয়েট

Answer 5

আপনি যদি নতুন ব্রাউজারগুলিতে ডেটাसेट সম্পত্তি হিসাবে একই সাথে সমস্ত কাস্টম ডেটা অ্যাট্রিবিউটগুলি পুনরুদ্ধার করতে চান তবে আপনি নিম্নলিখিতগুলি করতে পারেন। আমি এটিই করেছি এবং আমার জন্য 7 works + এ দুর্দান্ত কাজ করে।

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

Answer 6

ইন IE6 , এটা কাজ নাও করতে পারে। রেফারেন্সের জন্য: এমএসডিএন

আমি বেশিরভাগ ক্ষেত্রে হ্যান্ডল করতে jQuery ব্যবহার করার পরামর্শ দিই:

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

আপনার কোডিং এ চেষ্টা করুন।

Comments

আই 6 এ, এটি কাজ করে ( স্বীকৃত উত্তর দেখুন ), এবং আমি jQuery সম্পর্কে জিজ্ঞাসা করিনি।

— পল ডি ওয়েট

@ পল ডি ওয়েট: দুঃখিত, আমি ভুল করে আপনার স্প্যাম পতাকা প্রত্যাখ্যান করেছি। এটি সন্দেহজনক দেখাচ্ছে না।

— বোল্টক্লক

@ বল্টক্লক: এটি বেশ ঠিক আছে। কোডের পরামর্শটি আসলে কিছুটা যুক্তিসঙ্গত, তবে সেই সংবাদ পাঠকের লিঙ্কটি অবশ্যই পুরোপুরি সম্পর্কিত নয়।

— পল ডি ওয়েট

তাহলে কেন এটি এখনও 4 বছর পরে এখানে?

— ড্যান প্যান্ট্রি