Set data attribute using JavaScript

问题

I am using The DynaTree (https://code.google.com/p/dynatree) but I am having some problems and hoping someone can help..

I am displaying the tree on the page like below:

<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>

However I am trying to change the icon on a item no matter if it\'s selected or not only using JavaScript.

the new icon I want to use is base2.gif

I have tried using the following but it don\'t seem to work:

document.getElementById(\'item1\').data = \"icon: \'base2.gif\', url: \'output.htm\', target: \'AccessPage\', output: \'1\'\";

anyone know what I might be doing wrong?

回答1:

Use the setAttribute method:

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

But you really should be using data followed with a dash and with its property, like:

<li ... data-icon="base.gif" ...>

And to do it in JS use the dataset property:

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

回答2:

Please use dataset

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

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

so in your case for setting data:

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

来源：https://stackoverflow.com/questions/11286661/set-data-attribute-using-javascript

标签

javascript

dom

dynatree