obtener - Establecer el atributo de datos usando JavaScript

obtener el valor de un atributo js

Question

Estoy usando The DynaTree (https://code.google.com/p/dynatree) pero estoy teniendo algunos problemas y espero que alguien pueda ayudar ...

Estoy mostrando el árbol en la página como a continuación:

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

Sin embargo, estoy tratando de cambiar el ícono de un ítem sin importar si está seleccionado o no solo usando JavaScript .

el nuevo icono que quiero usar es base2.gif

He intentado usar lo siguiente, pero parece que no funciona:

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

Alguien sabe lo que podría estar haciendo mal?

Answer 1

Por favor use el conjunto de datos

var article = document.querySelector(''#electriccars''),
data = article.dataset;
// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

entonces en tu caso para establecer datos:

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

Answer 2

Use el método setAttribute :

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

Pero realmente debería usar datos seguidos con un guión y con su propiedad, como:

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

Y para hacerlo en JS utiliza la propiedad del dataset :

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