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 개체에 추가했으며 설정 방법을 궁금해했습니다.

그러나 추가하지 않아야 사용자 정의 당신의 재산에 속성 - 당신이 해야 사용 데이터 속성을 - 예를 들어, 영업 이익은 사용해야 data-icon, data-url, data-target, 등

어쨌든 JavaScript를 통해 이러한 속성을 설정하는 방법은 두 경우 모두 동일합니다. 사용하다:

ele.setAttribute(attributeName, value);

DOM 요소 attributeName에 value대해 주어진 속성을 변경합니다 ele.

예를 들면 :

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

을 사용 .dataset하여 데이터 속성 값을 설정할 수도 있지만 @racemic이 지적했듯이 62 % 더 느립니다 (적어도 작성 시점에 macOS의 Chrome에서는). 따라서 setAttribute대신 방법을 사용하는 것이 좋습니다 .