Método setAttribute() do Elemento DOM HTML

Definição e uso

setAttribute() O método adiciona o atributo especificado e atribui o valor especificado a ele.

Se o atributo especificado já existir, apenas define/muda o valor.

Atenção:O objeto HTMLElement do documento HTML define também propriedades JavaScript correspondentes a todos os atributos HTML padrão. Portanto, você só precisa usar este método quando precisar definir atributos não padrão.

Veja também:

Manual de referência:

Método getAttribute()

Método removeAttribute()

Método hasAttribute()

Método hasAttributes()

Método getAttributeNode()

Método setAttributeNode()

Método removeAttributeNode()

Tutorial:

Atributos do HTML

Exemplo

Exemplo 1

Adicionar atributo class ao elemento:

element.setAttribute("class", "democlass");

Antes de adicionar:

Objeto Element

Após adicionar:

Objeto Element

Experimente você mesmo

Exemplo 2

Converter campo de entrada para botão:

myInput.setAttribute("type", "button");

Experimente você mesmo

Antes de alterar:

Após alterar:

Exemplo 3

Adicionar atributo href ao elemento <a>:

myAnchor.setAttribute("href", "");

Experimente você mesmo

Antes de adicionar:

Acesse codew3c.com

Após adicionar:

Acesse codew3c.com

Exemplo 4

Mude o valor do atributo target para "_self":

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

Experimente você mesmo

Sintaxe

element.setAttribute(name, value)

Parâmetro

Parâmetro Descrição
name Obrigatório. Nome do atributo.
value Obrigatório. Novo valor do atributo.

Retorno

Nenhum.

Lançado

Exceção Descrição
INVALID_CHARACTER_ERR Parâmetro name Caracteres não permitidos em nomes de atributos HTML ou XML.
NO_MODIFICATION_ALLOWED_ERR O elemento atual é de leitura, não permitindo a modificação de seus atributos.

Atenção

É possível adicionar uma propriedade style com valor ao elemento, mas não é recomendado, pois ele substitui outras propriedades no atributo style.

Use a propriedade do objeto Style:

Desvantagem:

element.setAttribute("style", "background-color:red;");

Vantagem:

element.style.backgroundColor = "red";

Suporte do navegador

element.setAttribute() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte