Establecer atributo personalizado usando JavaScript

119

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 se muestra 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 elemento 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?

javascript dom dynatree

— Aaron
fuente

la palabra clave dataes un prefijo. Usted debe estar utilizandodata-you-attribute-name

— MilkyWayJoe

@ Aaron Debes elegir la mejor respuesta.

— 0x499602D2

Respuestas:

202

Usa el setAttributemétodo:

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

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

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

Y para hacerlo en JS usa la datasetpropiedad:

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

— 0x499602D2
fuente

La propiedad del conjunto de datos podría ser útil si solo se consideran los navegadores compatibles con HTML5, pero esa es una lista corta y se requiere un soporte más amplio para la web en general. Me limitaría a usar setAttribute por ahora.

— RobG

todavía no puedo hacer que funcione usando document.getElementById ('item1'). setAttribute ('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', salida: '1' ");

— Aaron

¿Qué estás haciendo exactamente en tu código que te hace darte cuenta de que no funciona?

— 0x499602D2

Agregué el código y agregué una alerta al final (por lo que se activará cuando el código esté listo), y también puedo ver que el ícono no cambia. (cuando elimino el código, veo mi pantalla de alart, así que sé que hay algo mal con el código que acabo de agregar).

— Aaron

IE <= 8 no admite setAttribute

— RTF

Utilice el conjunto de datos

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

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

así que en su caso para configurar datos:

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

— Sergej Jevsejev
fuente

Además (cuando sea apropiado), use camelCase para referirse a nombres con guiones (las cadenas entre corchetes fallan).

— 2540625

jsperf.com/html5-dataset-vs-native-setattribute Este método sugerido es mucho más lento

— racémico

Para las personas que vienen de Google, esta pregunta no se trata de atributos de datos: OP agregó un atributo no estándar a su objeto HTML y se preguntó cómo configurarlo.

Sin embargo, no debe agregar atributos personalizados a sus propiedades; debe usar atributos de datos - por ejemplo, OP debería haber utilizado data-icon, data-url, data-target, etc.

En cualquier caso, resulta que la forma de configurar estos atributos a través de JavaScript es la misma para ambos casos. Utilizar:

ele.setAttribute(attributeName, value);

para cambiar el atributo dado attributeNamea valuepara el elemento DOM ele.

Por ejemplo:

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

Tenga en cuenta que también puede usar .datasetpara establecer los valores de los atributos de datos, pero como señala @racemic, es un 62% más lento (al menos en Chrome en macOS en el momento de escribir este artículo). Así que recomendaría usar el setAttributemétodo en su lugar.

— Toastrackenigma
fuente