ตั้งค่าแอตทริบิวต์ที่กำหนดเองโดยใช้ JavaScript

ฉันใช้ The DynaTree (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>

อย่างไรก็ตามฉันพยายามเปลี่ยนไอคอนบนรายการไม่ว่าจะเลือกหรือไม่ใช้JavaScriptเท่านั้น

ไอคอนใหม่ที่ฉันต้องการใช้คือ base2.gif

ฉันได้ลองใช้สิ่งต่อไปนี้ แต่ดูเหมือนจะไม่ได้ผล:

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

มีใครรู้บ้างว่าฉันทำอะไรผิด?

ใช้setAttributeวิธีการ:

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

แต่คุณควรใช้ข้อมูลตามด้วยเครื่องหมายขีดกลางและคุณสมบัติเช่น:

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

และในการทำใน JS ให้ใช้datasetคุณสมบัติ:

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

โปรดใช้ชุดข้อมูล

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

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

ดังนั้นในกรณีของคุณสำหรับการตั้งค่าข้อมูล:

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

สำหรับผู้ที่มาจาก Google คำถามนี้ไม่เกี่ยวกับแอตทริบิวต์ข้อมูล - OP ได้เพิ่มแอตทริบิวต์ที่ไม่ได้มาตรฐานลงในออบเจ็กต์ HTML และสงสัยว่าจะตั้งค่าอย่างไร

อย่างไรก็ตามคุณไม่ควรเพิ่มแอตทริบิวต์ที่กำหนดเองคุณสมบัติของคุณ - คุณควรใช้แอตทริบิวต์ข้อมูล - เช่น OP ควรจะใช้data-icon, data-url, data-targetฯลฯ

ไม่ว่าในกรณีใด ๆ ปรากฎว่าวิธีที่คุณตั้งค่าแอตทริบิวต์เหล่านี้ผ่าน JavaScript นั้นเหมือนกันสำหรับทั้งสองกรณี ใช้:

ele.setAttribute(attributeName, value);

ที่จะเปลี่ยนคุณสมบัติที่ระบุattributeNameไปสำหรับองค์ประกอบvalue DOMele

ตัวอย่างเช่น:

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

โปรดทราบว่าคุณสามารถใช้.datasetเพื่อตั้งค่าแอตทริบิวต์ข้อมูลได้เช่นกัน แต่ตามที่ @racemic ชี้ให้เห็นว่าช้าลง 62% (อย่างน้อยใน Chrome บน macOS ขณะเขียน) เลยอยากแนะนำให้ใช้setAttributeวิธีแทน