JavaScript를 사용하여 데이터 속성 설정

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

참고 URL : https://stackoverflow.com/questions/11286661/set-data-attribute-using-javascript