Como adicionar / atualizar um atributo para um elemento HTML usando JavaScript?

128

Estou tentando encontrar uma maneira de adicionar / atualizar atributo usando JavaScript. Eu sei que posso fazê-lo com a setAttribute()função, mas isso não funciona no IE.

javascript html cross-browser desenvolvedor
fonte

Respostas:

163

Você pode ler aqui sobre o comportamento dos atributos em muitos navegadores diferentes, incluindo o IE.

element.setAttribute()deve fazer o truque, mesmo no IE. Você tentou? Se não funcionar, talvez element.attributeName = 'value'possa funcionar.

e eu
fonte
5
isso funciona. ele cria atributo se não existir e atualiza-o se existir. isso está documentado em algum lugar na medida em que isso funciona?
dev.e.loper
@ dev.e.loper DOM especificação é um bom lugar para começar: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/...
Valentinas
1
Quando faço o seguinte: document.getElementById("nav").setAttribute("class", "active");ele funciona no console do Chrome JS, mas na página real não funciona. A propósito, na página real, incluo o .jsarquivo antes do final do bodyescopo.
knownasilya
36

O que parece fácil é realmente complicado se você deseja ser completamente compatível.

var e = document.createElement('div');

Digamos que você tenha um ID de 'div1' para adicionar. 

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
Todos eles funcionarão, exceto o último no IE 5.5 (que é uma história antiga neste momento, mas ainda é o padrão do XP sem atualizações).

Mas existem contingências, é claro. Não vai funcionar no IE antes de 8: e.attributes['style'] não vai erro, mas não vai realmente definir a classe, ele deve ser className: e['class'].
No entanto, se você estiver usando atributos, isso funcionará:e.attributes['class']

Em resumo, pense nos atributos como literais e orientados a objetos.

No literal, você só quer cuspir x = 'y' e não pensar nisso. É para isso que servem os atributos setAttribute, createAttribute (exceto a exceção de estilo do IE). Mas, porque esses são realmente objetos, as coisas podem ficar confusas.

Como você está com o problema de criar corretamente um elemento DOM em vez do jQuery innerHTML slop, eu o trataria como um e ficaria com o e.className = 'fooClass' e e.id = 'fooID'. Essa é uma preferência de design, mas, neste caso, tentar tratar é como algo diferente de um objeto que trabalha contra você.

Ele nunca vai sair pela culatra como você pode fazer com os outros métodos, apenas lembre-se de que classe é className e style é um objeto, por isso é style.width not style = "width: 50px". Lembre-se também de tagName, mas isso já está definido por createElement, para que você não precise se preocupar com isso.

Isso foi mais longo do que eu queria, mas a manipulação de CSS no JS é um negócio complicado.

JPearce
fonte
5
O Windows XP saiu com o IE6, não com o 5.5. Isso seria terrível.
mgol 4/09/12
Isso funciona com id, não com algo mais comodata-toggle
stallingOne
30

Solução jQuery obrigatória . Localiza e define o titleatributo como foo. Observe que isso seleciona um único elemento, já que estou fazendo isso por ID, mas você pode facilmente definir o mesmo atributo em uma coleção alterando o seletor.

$('#element').attr( 'title', 'foo' );
tvanfosson
fonte
3
+1 para solução jQuery. No meu caso, eu estava tentando evitar o jQuery e produzi-lo em javascript puro, devido aos requisitos do meu trabalho. Fico feliz que as duas respostas existem. Obrigado.
NuclearPeon
7

O que você quer fazer com o atributo? É um atributo html ou algo próprio?

Na maioria das vezes você pode simplesmente tratá-lo como uma propriedade: deseja definir um título em um elemento? element.title = "foo"vai fazer isso.

Para seus próprios atributos JS personalizados, o DOM é naturalmente extensível (também conhecido como expando = true), cujo resultado simples é que você pode fazer element.myCustomFlag = fooe, posteriormente, lê-lo sem problemas.

annakata
fonte