web-dev-qa-db-ja.com

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

誰が私が間違っているのか知っていますか？

javascriptdomdynatree
102
Aaron

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";
185
0x499602D2

データセットを使用してください

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

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

したがって、データを設定する場合：

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