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

誰かが私が間違っているかもしれないことを知っていますか？

次の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);

DOM要素の指定された属性attributeNameをに変更します。valueele

例えば：

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

を使用.datasetしてデータ属性の値を設定することもできますが、@ racemicが指摘しているように、62％遅くなります（少なくとも執筆時のmacOS上のChromeでは）。そのため、setAttribute代わりにメソッドを使用することをお勧めします。