Legen Sie ein benutzerdefiniertes Attribut mit JavaScript fest

119

Ich verwende The DynaTree (https://code.google.com/p/dynatree), habe aber einige Probleme und hoffe, dass jemand helfen kann.

Ich zeige den Baum auf der Seite wie folgt an:

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

Ich versuche jedoch, das Symbol eines Elements zu ändern, unabhängig davon, ob es ausgewählt ist oder nicht nur JavaScript verwendet .

Das neue Symbol, das ich verwenden möchte, ist base2.gif

Ich habe Folgendes versucht, aber es scheint nicht zu funktionieren:

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

Weiß jemand, was ich falsch machen könnte?

javascript dom dynatree Aaron
quelle
3
Das Schlüsselwort dataist ein Präfix. Sie sollten verwendendata-you-attribute-name
MilkyWayJoe
6
@ Aaron Du solltest eine beste Antwort wählen.
0x499602D2

Antworten:

202

Verwenden Sie die setAttributeMethode:

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

Aber Sie sollten wirklich Daten verwenden, denen ein Bindestrich und seine Eigenschaft folgen, wie:

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

Und um dies in JS zu tun, verwenden Sie die datasetEigenschaft:

document.getElementById('item1').dataset.icon = "base.gif";
0x499602D2
quelle
9
Die Dataset-Eigenschaft kann nützlich sein, wenn nur Browser berücksichtigt werden, die mit HTML5 kompatibel sind. Dies ist jedoch eine kurze Liste, und für das allgemeine Web ist eine umfassendere Unterstützung erforderlich. Ich würde mich vorerst an setAttribute halten .
RobG
Mit document.getElementById ('item1') kann es immer noch nicht funktionieren. setAttribute ('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1' ");
Aaron
2
Was genau machen Sie in Ihrem Code, damit Sie feststellen, dass es nicht funktioniert?
0x499602D2
Ich habe den Code hinzugefügt und am Ende eine Warnung hinzugefügt (damit er angezeigt wird, wenn der Code fertig ist), und ich kann auch sehen, dass sich das Symbol nicht ändert. (Wenn ich den Code entferne, wird meine Alart-Anzeige angezeigt, sodass ich weiß, dass mit dem Code, den ich gerade hinzugefügt habe, etwas nicht stimmt.)
Aaron
IE <= 8 unterstützt setAttribute
RTF
56

Bitte verwenden Sie den Datensatz

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

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

Also in Ihrem Fall zum Einstellen von Daten:

getElementById('item1').dataset.icon = "base2.gif";
Sergej Jevsejev
quelle
1
Verwenden Sie (falls zutreffend) auch camelCase, um auf Namen mit Bindestrich zu verweisen (Zeichenfolgen in Klammern schlagen fehl).
2540625
6
jsperf.com/html5-dataset-vs-native-setattribute Diese vorgeschlagene Methode ist viel langsamer
racemisch
4

Bei Google-Nutzern geht es bei dieser Frage nicht um Datenattribute. OP hat seinem HTML-Objekt ein nicht standardmäßiges Attribut hinzugefügt und sich gefragt, wie es festgelegt werden soll.

Sie sollten jedoch nicht benutzerdefinierte Attribute hinzufügen , um Ihre Eigenschaften - Sie sollten verwenden Datenattribute - zB OP verwendet haben sollte data-icon, data-url, data-targetetc.

In jedem Fall stellt sich heraus, dass die Art und Weise, wie Sie diese Attribute über JavaScript festlegen, in beiden Fällen gleich ist. Verwenden:

ele.setAttribute(attributeName, value);

das gegebene Attribut zu ändern , attributeNameum valuefür das DOM - Element ele.

Beispielsweise:

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

Beachten Sie, dass Sie auch .datasetdie Werte von Datenattributen festlegen können. Wie @racemic jedoch hervorhebt, ist diese um 62% langsamer (zumindest in Chrome unter macOS zum Zeitpunkt des Schreibens). Daher würde ich empfehlen, stattdessen die setAttributeMethode zu verwenden.

Toastrackenigma
quelle