Ustaw atrybut niestandardowy za pomocą JavaScript

119

Używam The DynaTree (https://code.google.com/p/dynatree), ale mam pewne problemy i mam nadzieję, że ktoś może pomóc.

Drzewo wyświetlam na stronie jak poniżej:

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

Jednak próbuję zmienić ikonę na elemencie bez względu na to, czy jest zaznaczona, czy nie tylko przy użyciu JavaScript .

nowa ikona, której chcę użyć, to base2.gif

Próbowałem użyć następujących, ale wydaje się, że nie działają:

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

ktoś wie, co mogę robić źle?

javascript dom dynatree

— Aaron
źródło

słowo kluczowe datajest przedrostkiem. Powinieneś używaćdata-you-attribute-name

— MilkyWayJoe

@Aaron Powinieneś wybrać najlepszą odpowiedź.

— 0x499602D2

Odpowiedzi:

202

Użyj setAttributemetody:

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

Ale naprawdę powinieneś używać danych zakończonych myślnikiem i ich właściwości, takich jak:

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

Aby to zrobić w JS, użyj datasetwłaściwości:

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

— 0x499602D2
źródło

Właściwość zestawu danych może być przydatna, jeśli brane są pod uwagę tylko przeglądarki zgodne z HTML5, ale jest to krótka lista, a ogólna sieć wymaga szerszej obsługi. Na razie trzymałbym się setAttribute .

— RobG,

nadal nie mogę go uruchomić, używając document.getElementById ('item1'). setAttribute ('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: „1” ”);

— Aaron

Co dokładnie robisz w swoim kodzie, co sprawia, że zdajesz sobie sprawę, że nie działa?

— 0x499602D2

Dodałem kod i dodałem alert na końcu (więc będzie słyszalny, gdy kod zostanie ukończony), a także widzę, że ikona się nie zmienia. (kiedy usuwam kod, widzę mój wyświetlacz alart, więc wiem, że coś jest nie tak z kodem, który właśnie dodałem.)

— Aaron

IE <= 8 nie obsługuje setAttribute

— RTF

Użyj zbioru danych

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

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

więc w twoim przypadku do ustawienia danych:

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

— Sergej Jevsejev
źródło

Ponadto (w stosownych przypadkach) użyj camelCase, aby odwołać się do nazw z łącznikami (ciągi w nawiasach nie działają).

— 2540625

jsperf.com/html5-dataset-vs-native-setattribute Ta sugerowana metoda jest dużo wolniejsza

— racemiczna

Dla osób pochodzących z Google to pytanie nie dotyczy atrybutów danych - OP dodał niestandardowy atrybut do swojego obiektu HTML i zastanawiał się, jak go ustawić.

Jednakże, nie należy dodawać atrybutów niestandardowych do swoich właściwości - Państwo powinno użyć atrybutów danych - np OP powinien być stosowany data-icon, data-url, data-target, itd.

W każdym razie okazuje się, że sposób ustawiania tych atrybutów przez JavaScript jest taki sam w obu przypadkach. Posługiwać się:

ele.setAttribute(attributeName, value);

aby zmienić daną cechę attributeNamedo valuedo elementu DOM ele.

Na przykład:

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

Zauważ, że możesz również użyć .datasetdo ustawienia wartości atrybutów danych, ale jak wskazuje @racemic, jest on o 62% wolniejszy (przynajmniej w Chrome na macOS w momencie pisania). Dlatego poleciłbym setAttributezamiast tego użyć tej metody.

— Toastrackenigma
źródło