131

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

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

4

3 に答える 3

218

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";
于 2012-07-02T00:22:29.340 に答える
65

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

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

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

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

getElementById('item1').dataset.icon = "base2.gif";
于 2014-05-07T10:34:22.973 に答える
20

Google から来た人にとって、この質問はデータ属性に関するものではありません。OP は非標準属性を HTML オブジェクトに追加し、それを設定する方法を知りました。

ただし、プロパティにカスタム属性を追加しないでください。データ属性を使用する必要があります。たとえば、OPでは、、、などを使用する必要がありました。data-icondata-urldata-target

いずれにせよ、JavaScript を介してこれらの属性を設定する方法は、どちらの場合も同じであることがわかります。使用する：

ele.setAttribute(attributeName, value);

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

例えば：

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

.datasetを使用してデータ属性の値を設定することもできることに注意してください。setAttributeそのため、代わりにメソッドを使用することをお勧めします。

于 2020-01-21T05:17:17.680 に答える