Definir o atributo personalizado usando JavaScript

119

Estou usando o DynaTree (https://code.google.com/p/dynatree), mas estou tendo alguns problemas e espero que alguém possa ajudar ..

Estou exibindo a árvore na página como abaixo:

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

No entanto, estou tentando mudar o ícone em um item, não importa se ele está selecionado ou não apenas usando JavaScript .

o novo ícone que desejo usar é o base2.gif

Eu tentei usar o seguinte, mas não parece funcionar:

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

alguém sabe o que posso estar fazendo de errado?

javascript dom dynatree

— Aaron
fonte

a palavra data- chave é um prefixo. Você deveria estar usandodata-you-attribute-name

— MilkyWayJoe

@Aaron Você deve escolher a melhor resposta.

— 0x499602D2

Respostas:

202

Use o setAttributemétodo:

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

Mas você realmente deveria usar dados seguidos de um travessão e com sua propriedade, como:

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

E para fazer isso em JS use a datasetpropriedade:

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

— 0x499602D2
fonte

A propriedade dataset pode ser útil se apenas navegadores compatíveis com HTML5 forem considerados, mas essa é uma lista curta e um suporte mais amplo é necessário para a web em geral. Eu continuaria usando setAttribute por enquanto.

— RobG

ainda não consigo fazê-lo funcionar usando document.getElementById ('item1'). setAttribute ('dados', "ícone: 'base2.gif', url: 'output.htm', destino: 'AccessPage', saída: '1' ");

— Aaron

O que exatamente você está fazendo em seu código que o faz perceber que ele não está funcionando?

— 0x499602D2

Eu adicionei o código e adicionei um alerta no final (então ele será iniciado quando o código estiver pronto), e também posso ver que o ícone não muda. (quando eu removo o código, vejo meu novo display, então eu sei que há algo errado com o código que acabei de adicionar.)

— Aaron

IE <= 8 não suporta setAttribute

— RTF

Use um conjunto de dados

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

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

então, no seu caso para definir dados:

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

— Sergej Jevsejev
fonte

Além disso (quando apropriado), use camelCase para se referir a nomes hifenizados (strings entre colchetes falham).

— 2540625

jsperf.com/html5-dataset-vs-native-setattribute Este método sugerido é muito mais lento

— racêmico

Para as pessoas que vêm do Google, esta questão não é sobre atributos de dados - o OP adicionou um atributo não padrão ao seu objeto HTML e perguntou como configurá-lo.

No entanto, você não deve adicionar atributos personalizados a seus propriedades - você deve usar atributos de dados - por exemplo, OP deveria ter usado data-icon, data-url, data-target, etc.

Em qualquer caso, verifica-se que a maneira como você define esses atributos via JavaScript é a mesma para os dois casos. Usar:

ele.setAttribute(attributeName, value);

para alterar o atributo fornecido attributeNamepara valuepara o elemento DOM ele.

Por exemplo:

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

Observe que você também pode usar .datasetpara definir os valores dos atributos de dados, mas como @racemic aponta, é 62% mais lento (pelo menos no Chrome no macOS no momento da escrita). Portanto, eu recomendaria usar o setAttributemétodo.

— Toastrackenigma
fonte