Imposta l'attributo personalizzato utilizzando JavaScript

119

Sto usando The DynaTree (https://code.google.com/p/dynatree) ma ho dei problemi e spero che qualcuno possa aiutarmi ..

Sto visualizzando l'albero sulla pagina come di seguito:

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

Tuttavia sto provando a cambiare l'icona su un elemento, non importa se è selezionato o non solo utilizzando JavaScript .

la nuova icona che desidero utilizzare è base2.gif

Ho provato a utilizzare quanto segue ma non sembra funzionare:

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

qualcuno sa cosa potrei fare di sbagliato?

javascript dom dynatree

— Aaron
fonte

la parola chiave dataè un prefisso. Dovresti usaredata-you-attribute-name

— MilkyWayJoe

@Aaron Dovresti scegliere una risposta migliore.

— 0x499602D2

Risposte:

202

Usa il setAttributemetodo:

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

Ma dovresti davvero usare i dati seguiti da un trattino e con la sua proprietà, come:

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

E per farlo in JS usa la datasetproprietà:

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

— 0x499602D2
fonte

La proprietà del set di dati potrebbe essere utile se si considerassero solo i browser compatibili con HTML5, ma si tratta di un breve elenco e per il Web generale è richiesto un supporto più ampio. Per ora continuerei a usare setAttribute .

— RobG

ancora non riesco a farlo funzionare utilizzando document.getElementById ('item1'). setAttribute ('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1' ");

— Aaron

Cosa stai facendo esattamente nel tuo codice che ti fa capire che non funziona?

— 0x499602D2

Ho aggiunto il codice e aggiunto un avviso alla fine (quindi si attiverà quando il codice sarà terminato) e vedo anche che l'icona non cambia. (Quando rimuovo il codice vedo il mio display di alart, quindi so che c'è qualcosa di sbagliato nel codice che ho appena aggiunto.)

— Aaron

IE <= 8 non supporta setAttribute

— RTF

Si prega di utilizzare il set di dati

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

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

quindi nel tuo caso per l'impostazione dei dati:

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

— Sergej Jevsejev
fonte

Inoltre (se appropriato), usa camelCase per fare riferimento ai nomi con trattino (le stringhe tra parentesi non funzionano).

— 2540625

jsperf.com/html5-dataset-vs-native-setattribute Questo metodo suggerito è molto più lento

— racemico

Per le persone provenienti da Google, questa domanda non riguarda gli attributi dei dati: OP ha aggiunto un attributo non standard al proprio oggetto HTML e si è chiesto come impostarlo.

Tuttavia, non è necessario aggiungere attributi personalizzati per le vostre proprietà - si dovrebbe usare gli attributi dei dati - ad esempio OP avrebbe dovuto utilizzare data-icon, data-url, data-target, etc.

In ogni caso, risulta che il modo in cui imposti questi attributi tramite JavaScript è lo stesso per entrambi i casi. Uso:

ele.setAttribute(attributeName, value);

per modificare l'attributo specificato attributeNamein valueper l'elemento DOM ele.

Per esempio:

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

Nota che puoi anche usare .datasetper impostare i valori degli attributi dei dati, ma come sottolinea @racemic, è più lento del 62% (almeno in Chrome su macOS al momento della scrittura). Quindi consiglierei di utilizzare il setAttributemetodo invece.

— Toastrackenigma
fonte