Element.setAttribute()

Adiciona um novo atributo ou modifica o valor de um atributo existente num elemento específico.

Sintaxe

element.setAttribute(name, value);

• name é o nome do atributo como string.
• value é o novo valor desejado do atributo

Exemplo

No seguinte exemplo, setAttribute() é usado para definir o atributo disabled no <button>, tornando-o desabilitado.

<button>Hello World</button>

var b = document.querySelector("button"); 

b.setAttribute("disabled", "disabled");

Notas

Quando chamado em um elemento HTML em um documento HTML, setAttribute lower-cases its attribute name argument.

Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe. então o atributo é criado.

Apesar de getAttribute() retornar null para atributos ausentes, você precisa usar removeAttribute() ao invés de elt.setAttribute(attr, null) para remover o atributo. Este último forçará o valor null para a string "null", o que não é, provavelmente, o que você quer.

Usar setAttribute() para modificar certos atributos, mais notavelmente valor em XUL, funciona inconsistentemente, como atributos específicos de valor padrão. Para acessar ou modificar os valores atuais, você deve usar as propriedades. Por exemplo, use elt.value ao invés de elt.setAttribute('value', val).

Para definir um atributo que não leva valor, assim como o atributo autoplay de um elemento <audio>, use null ou um valor vazio. Por exemplo: elt.setAttribute('autoplay', '')

Especificação

• DOM Level 2 Core: setAttribute (introduzido em DOM Level 1 Core)
• HTML5: APIs in HTML documents