জাভাস্ক্রিপ্ট কোডে ডেটা বৈশিষ্ট্য পান

Question

আমার পরের এইচটিএমএল আছে:

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

শুরু হওয়া বৈশিষ্ট্যগুলি পাওয়া data-এবং নীচে কোডটির মতো জাভাস্ক্রিপ্ট কোডে ব্যবহার করা কি সম্ভব ? আপাতত আমি nullফলাফল হিসাবে পেতে ।

document.getElementById("the-span").addEventListener("click", function(){
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});

Comments

আজকাল (2019) এ এসভিজি নোড (!) এর সাথে নোডের ডেটাসেট সম্পত্তি ব্যবহার করা, নীচের উত্তর দেখুন বা ডি 3 দিয়ে ব্যবহার করাও সম্ভব ।

— পিটার ক্রাউস 17'19

Answer 1

আপনার datasetসম্পত্তিটি অ্যাক্সেস করতে হবে :

document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});

ফলাফল:

// json would equal:
{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

Comments

মনে রাখবেন যে এমডিএন অনুসারে ডেটাসেট স্ট্যান্ডার্ড ইন্টারনেট এক্সপ্লোরার <১১ বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / লার্ন / এইচটিএমএল / হাওটো/… জন্য কাজ করবে না "আইই 10 সমর্থন করার জন্য এবং আপনাকে অ্যাক্সেস করতে হবে পরিবর্তে getAttribute () এর সাথে ডেটা বৈশিষ্ট্য "

— জোজনাতান

Answer 2

কারণ datasetসম্পত্তি সংস্করণ 11 পর্যন্ত ইন্টারনেট এক্সপ্লোরার দ্বারা সমর্থিত নেই, তাই আপনাকে ব্যবহার করতে পারেন getAttribute()পরিবর্তে:

document.getElementById("the-span").addEventListener("click", function(){
  console.log(this.getAttribute('data-type'));
});

ডেটাসেট ডকুমেন্টেশন

getAttribute ডকুমেন্টেশন

Answer 3

আপনি এটি হিসাবে অ্যাক্সেস করতে পারেন

element.dataset.points

ইত্যাদি। সুতরাং এই ক্ষেত্রে: this.dataset.points

Answer 4

আপনি getAttribute () পদ্ধতির সাহায্যে বৈশিষ্ট্যগুলিও দখল করতে পারেন যা কোনও নির্দিষ্ট এইচটিএমএল বৈশিষ্ট্যের মান প্রদান করবে।

var elem = document.getElementById('the-span');

var typeId = elem.getAttribute('data-typeId');
var type   = elem.getAttribute('data-type');
var points = elem.getAttribute('data-points');
var important = elem.getAttribute('data-important');

console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

Answer 5

যদি আপনি এইচটিএমএল উপাদানটিতে ডেটা অ্যাট্রিবিউটকে টার্গেট করে থাকেন,

document.dataset কাজ করবে না

আপনার ব্যবহার করা উচিত

document.querySelector("html").dataset.pbUserId

অথবা

document.getElementsByTagName("html")[0].dataset.pbUserId

Answer 6

আধুনিক ব্রাউজারগুলি এইচটিএমএল এবং এসভিজি DOMnode.dataset গ্রহণ করে

ব্যবহার বিশুদ্ধ জাভাস্ক্রিপ্ট এর করে DOM-নোড ডেটা সেটটি সম্পত্তি ।

এটি এইচটিএমএল উপাদানগুলির জন্য পুরানো জাভাস্ক্রিপ্ট স্ট্যান্ডার্ড (যেহেতু Chorme 8 এবং ফায়ারফক্স 6) তবে এসভিজির জন্য নতুন (২০১ 2017 সাল থেকে Chorme 55.x এবং ফায়ারফক্স ৫১ সহ) ... এটি এসভিজির জন্য কোনও সমস্যা নয় কারণ আজকাল (2019) সংস্করণটির ব্যবহারের ভাগ আধুনিক ব্রাউজারগুলির দ্বারা প্রভাবিত।

ডেটাসেটের কী-মানগুলির মানগুলি খাঁটি স্ট্রিং, তবে একটি ভাল অনুশীলন হ'ল JSON স্ট্রিং ফর্ম্যাটটিকে নন-স্ট্রিং ডেটাটাইপগুলির জন্য এটিকে পার্স করার জন্য গ্রহণ করা JSON.parse()।

কোনও প্রসঙ্গে ডেটাसेट সম্পত্তি ব্যবহার করা

এইচটিএমএল এবং এসভিজি প্রসঙ্গে কুল -মান ডেটাসেটগুলি পেতে এবং সেট করতে কোড স্নিপেট ।

console.log("-- GET values --")
var x = document.getElementById('html_example').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)

var y = document.getElementById('g1').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)

console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById('svg_example').innerHTML )

<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello!</p>
<svg id="svg_example">
  <g id="g1" data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>

Answer 7

সর্বাধিক 2019, jquery ব্যবহার করে, আপনার স্প্যান উপাদানটির জন্য jquery নির্বাচনকারী $('#DOMId').data('typeId')কোথায় $('#DOMId')তা ব্যবহার করে এটি অ্যাক্সেস করা যায় ।

Answer 8

আপনার কোডের পরিবর্তে এটি ব্যবহার করে দেখুন:

var type=$("#the-span").attr("data-type");
alert(type);

Comments

প্রশ্নকর্তা jQuery উল্লেখ করেননি, এটি এই পুরোপুরি জন্য ভাল jQuery নয়। .data('type');পরিবর্তে হওয়া উচিত ।

— কলিন ডিক্লু

এবং তার উপরে, এইটিকে "আপনার কোডের পরিবর্তে" ব্যবহার করার পরামর্শটি অনেক বেশি বিস্তৃত; প্রশ্নকর্তা ঘটনা হ্যান্ডলিং সেট-আপ, এবং রাখার চাইবেন JSONফলে কোনো alert এর data-typeঅ্যাট্রিবিউট।

— ট্রিনকোট

এটি jquery, খাঁটি জাভাস্ক্রিপ্ট নয়।

— ব্যবহারকারী3130012