জাভাস্ক্রিপ্ট ব্যবহার করে কাস্টম বৈশিষ্ট্য সেট করুন

Question

আমি দ্য ডাইনাট্রি (https://code.google.com/p/dynatree) ব্যবহার করছি তবে আমার কিছু সমস্যা হচ্ছে এবং আশা করছি যে কেউ সহায়তা করতে পারে ..

আমি নীচের মত পৃষ্ঠায় গাছ প্রদর্শন করছি:

<div id="tree">
        <ul>
            <li class="folder">Outputs
                <ul>
                    <li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title
                    <li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title
                    <li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title
                    <li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title
                </ul>
        </ul>
    </div>

তবে আমি আইটেমটি জাভাস্ক্রিপ্ট ব্যবহার করে বা এটি নির্বাচিত হয়েছে বা না তা বিবেচনা করেই এটি পরিবর্তন করার চেষ্টা করছি ।

আমি যে নতুন আইকনটি ব্যবহার করতে চাই তা হ'ল বেস 2.gif

আমি নিম্নলিখিতটি ব্যবহার করার চেষ্টা করেছি তবে এটি কার্যকর হবে বলে মনে হচ্ছে না:

document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";

কেউ কি জানেন আমি কী ভুল করছি?

Comments

শব্দ dataএকটি প্রিফিক্স। আপনার ব্যবহার করা উচিতdata-you-attribute-name

— মিল্কিওয়েজজ

@ অ্যারন আপনার সেরা উত্তর চয়ন করা উচিত।

— 0x499602D2

Answer 1

setAttributeপদ্ধতিটি ব্যবহার করুন :

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

তবে আপনার সত্যিকার অর্থে ড্যাশ এবং এর সম্পত্তি সহ ডেটা ব্যবহার করা উচিত, যেমন:

<li ... data-icon="base.gif" ...>

এবং জেএসে এটি করতে datasetসম্পত্তিটি ব্যবহার করুন :

document.getElementById('item1').dataset.icon = "base.gif";

Comments

এইচটিএমএল 5 এর সাথে সঙ্গতিপূর্ণ ব্রাউজারগুলি বিবেচনা করা হলে ডেটাसेट সম্পত্তিটি কার্যকর হতে পারে তবে এটি একটি সংক্ষিপ্ত তালিকা এবং সাধারণ ওয়েবের জন্য আরও বিস্তৃত সমর্থন প্রয়োজন। আমি আপাতত সেটঅ্যাট্রিবিউট ব্যবহার করতে থাকি।

— রবজি

ডকুমেন্ট.সেটিমেন্টবাইআইডি ('আইটেম 1') ব্যবহার করে এখনও এটি কাজ করতে পারে না set '1' ");

— হারুন

আপনি আপনার কোডটিতে ঠিক কী করছেন যা আপনাকে বোঝায় যে এটি কাজ করছে না?

— 0x499602D2

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

— হারুন

আইই <= 8 সেটঅ্যাট্রিবিউট সমর্থন করে না

— আরটিএফ

Answer 2

দয়া করে ডেটাসেট ব্যবহার করুন

var article = document.querySelector('#electriccars'),
    data = article.dataset;

// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

ডেটা সেট করার ক্ষেত্রে আপনার ক্ষেত্রে:

getElementById('item1').dataset.icon = "base2.gif";

Comments

এছাড়াও (উপযুক্ত হলে) হাইফেনেটেড নামগুলি উল্লেখ করার জন্য উটকেস ব্যবহার করুন (বন্ধনীযুক্ত স্ট্রিং ব্যর্থ হয়)।

— 2540625

jsperf.com/html5-dataset-vs-native-setattribute এই প্রস্তাব পদ্ধতি অনেক ধীর

— racemic

Answer 3

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

যাইহোক, যদি আপনি না যোগ করা উচিত কাস্টম আপনার বৈশিষ্ট্য বৈশিষ্ট্যাবলী - আপনি উচিত ব্যবহার ডেটা বৈশিষ্ট্যাবলী যেমন ওপি ব্যবহার করেছেন হবে - data-icon, data-url, data-target, ইত্যাদি

যে কোনও ইভেন্টে দেখা যাচ্ছে যে আপনি জাভাস্ক্রিপ্টের মাধ্যমে এই বৈশিষ্ট্যগুলি যেভাবে সেট করেছেন তা উভয় ক্ষেত্রেই একই। ব্যবহার করুন:

ele.setAttribute(attributeName, value);

প্রদত্ত অ্যাট্রিবিউট পরিবর্তন করতে attributeNameকরতে valueDOM উপাদান জন্য ele।

উদাহরণ স্বরূপ:

document.getElementById("someElement").setAttribute("data-id", 2);

নোট করুন যে আপনি .datasetডেটা অ্যাট্রিবিউটসের মান সেট করতেও ব্যবহার করতে পারেন তবে @ কাসেমিক পয়েন্ট হিসাবে এটি 62% ধীর (কমপক্ষে ক্রমের ক্ষেত্রে ম্যাকোজে লেখার সময়)। সুতরাং আমি setAttributeপরিবর্তে পদ্ধতিটি ব্যবহার করার পরামর্শ দেব ।