Установить атрибут данных с помощью JavaScript

Я использую 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'";

Кто-нибудь знает, что я могу делать неправильно?

Ответ 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";

Ответ 2

Пожалуйста, используйте набор данных

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

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

поэтому в вашем случае для установки данных:

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