जावास्क्रिप्ट का उपयोग करके कस्टम विशेषता सेट करें

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>

हालाँकि, मैं किसी आइटम पर आइकन को बदलने की कोशिश कर रहा हूं, भले ही वह केवल जावास्क्रिप्ट का उपयोग करके चुना गया हो या नहीं ।

नया आइकन जो मैं उपयोग करना चाहता हूं, वह base2.gif है

मैंने निम्नलिखित का उपयोग करने की कोशिश की है लेकिन यह काम नहीं करता है:

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

किसी को पता है कि मैं क्या गलत कर सकता हूं?

Comments

कीवर्ड dataएक उपसर्ग है। आप का उपयोग करना चाहिएdata-you-attribute-name

— MilkyWayJoe

@ एरोन आपको एक सर्वश्रेष्ठ उत्तर चुनना चाहिए।

— 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

डेटासेट की संपत्ति उपयोगी हो सकती है यदि केवल HTML5 के अनुरूप ब्राउज़र को माना जाता है, लेकिन यह एक छोटी सूची है और सामान्य वेब के लिए व्यापक समर्थन की आवश्यकता है। मैं अभी के लिए setAttribute का उपयोग करने के लिए छड़ी हूँ ।

— RobG

अभी भी इसे document.getElementById ('item1') का उपयोग करके काम करने के लिए नहीं किया जा सकता है। '1' ");

— एरोन

आप वास्तव में अपने कोड में क्या कर रहे हैं जिससे आपको पता चलता है कि यह काम नहीं कर रहा है?

— 0x499602D2

मैंने कोड जोड़ा है और अंत में एक अलर्ट जोड़ा है (इसलिए जब कोड किया जाएगा तो यह चालू हो जाएगा), और मैं आइकन को नहीं बदलते हुए भी देख सकता हूं। (जब मैं कोड निकालता हूं तो मेरा एलर्ट डिस्प्ले दिखाई देता है, इसलिए मुझे पता है कि मेरे द्वारा जोड़े गए कोड के साथ कुछ गलत है।)

— एरन

IE <= 8 setAttribute का समर्थन नहीं करता

— RTF

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 यह सुझाव दिया विधि है बहुत धीमी

— रेस्मिक

Answer 3

Google से आने वाले लोगों के लिए, यह प्रश्न डेटा विशेषताओं के बारे में नहीं है - ओपी ने अपने HTML ऑब्जेक्ट में एक गैर-मानक विशेषता जोड़ी है, और आश्चर्य है कि इसे कैसे सेट किया जाए।

हालांकि, अगर आप नहीं जोड़ना चाहिए कस्टम अपने गुणों के गुण - आप चाहिए का उपयोग डेटा विशेषताओं जैसे ओ पी का इस्तेमाल किया है चाहिए - data-icon, data-url, data-target, आदि

किसी भी घटना में, यह पता चलता है कि जावास्क्रिप्ट के माध्यम से आप इन विशेषताओं को सेट करते हैं, दोनों मामलों के लिए समान है। उपयोग:

ele.setAttribute(attributeName, value);

दी गई विशेषता को बदलने के लिए attributeNameकरने के लिए valueडोम तत्व के लिए ele।

उदाहरण के लिए:

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

ध्यान दें कि आप .datasetडेटा विशेषताओं के मूल्यों को सेट करने के लिए भी उपयोग कर सकते हैं , लेकिन @racemic बताते हैं, यह 62% धीमा है (लेखन के समय macOS पर कम से कम क्रोम में)। इसलिए मैं setAttributeइसके बजाय विधि का उपयोग करने की सलाह दूंगा।