dom - Sett egendefinert attributt ved hjelp av JavaScript

Jeg bruker The DynaTree (https://code.google.com/p/dynatree) men jeg har noen problemer og håper at noen kan hjelpe..

Jeg viser treet på siden som vist nedenfor:

<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>
                <li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title</li>
                <li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title</li>
                <li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title</li>
            </ul>
        </li>
    </ul>
</div>

Jeg prøver imidlertid å endre ikonet på et element uansett om det er valgt eller ikke, kun ved å bruke JavaScript.

det nye ikonet jeg vil bruke er base2.gif

Jeg har prøvd å bruke følgende, men det ser ikke ut til å fungere:

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

Vet noen hva jeg kan gjøre feil?

Svar #1

Bruk setAttribute-metoden:

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

Men du bør virkelig bruke data etterfulgt av en bindestrek og med dens egenskap, som:

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

Og for å gjøre det i JS, bruk dataset-egenskapen:

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

Svar #2

Vennligst bruk datasett

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

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

så i ditt tilfelle for å sette data:

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

Svar #3

For folk som kommer fra Google, handler ikke dette spørsmålet om dataattributter - OP la til et ikke-standard attributt i HTML-objektet sitt, og lurte på hvordan man setter det.

Du bør imidlertid ikke legge til tilpassede attributter på eiendelene dine - du bør bruke dataattributter - f.eks. burde OP ha brukt data-icon, data-url, data-target, osv.

Uansett viser det seg at måten du setter disse attributtene på via JavaScript er den samme i begge tilfeller. Bruk:

ele.setAttribute(attributeName, value);

å endre den gitte attributten attributeName til value for DOM-elementet ele.

For eksempel:

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

Merk at du også kan bruke .dataset for å sette verdiene til dataattributter, men som @racemic påpeker, er det 62 % tregere (i hvert fall i Chrome på macOS på tidspunktet for skrivingen). Så jeg vil anbefale å bruke setAttribute-metoden i stedet.

Relaterte artikler