Element: método setAttribute()

O método setAttribute() da interface Element define o valor de um atributo no elemento especificado. Se o atributo já existir, o valor será atualizado; caso contrário, um novo atributo será adicionado com o nome e valor especificados.

Para obter o valor atual de um atributo, use getAttribute(); para remover um atributo, chame removeAttribute().

Se você precisar trabalhar com o nó Attr (como clonar de outro elemento) antes de adicioná-lo, você pode usar o nó setAttributeNode() método em vez disso.

Sintaxe

js
setAttribute(name, value)

Parâmetros

name

Uma string especificando o nome do atributo cujo valor deve ser definido. O nome do atributo é automaticamente convertido para letras minúsculas quando setAttribute() é chamado em um elemento HTML em um documento HTML.

value

Uma string contendo o valor a ser atribuído ao atributo.Qualquer valor não-string especificado é convertido automaticamente em uma string.

Atributos booleanos são considerados true se estiverem presentes no elemento em tudo. Você deve definir value para a string vazia ("") ou o nome do atributo, sem espaços em branco à esquerda ou à direita. Veja o exemplo abaixo para uma demonstração prática.

Como o value especificado é convertido em uma string, especificando null não necessariamente faz o que você espera. Em vez de remover o atributo ou definindo seu valor como null, em vez disso, ele define o valor do atributo para a string "null". Se você deseja remover um atributo, chame removeAttribute().

Valor de retorno

None (undefined).

Exceções

InvalidCharacterError DOMException

Lançado se o valor name não for um [nome XML](https://www.w3.org/TR/REC-xml/#dt-name válido); por exemplo, começa com um número, um hífen ou um ponto, ou contém caracteres diferentes de caracteres alfanuméricos, sublinhados, hifens ou pontos.

Exemplo

No exemplo a seguir, setAttribute() é usado para definir atributos em um <button>.

html
<button>Hello World</button>

JavaScript

js
const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

Isso demonstra duas coisas:

  • A primeira chamada para setAttribute() acima mostra a alteração do valor do atributo name para "helloButton". Você pode ver isso usando o inspetor de páginas do seu navegador (Chrome, Edge, Firefox, Safari).
  • Para definir o valor de um atributo booleano, como disabled, você pode especificar qualquer valor. Uma string vazia ou o nome do atributo são valores recomendados. Tudo o que importa é que se o atributo estiver presente, independentemente do seu valor real, o seu valor é considerado 'verdadeiro'. A ausência do atributo significa que seu valor é false. Ao definir o valor do atributo disabled para a string vazia (""), estamos definindo disabled como true, o que resulta na desativação do botão.

Especificações

Specification
DOM Standard
# ref-for-dom-element-setattribute①

Compatibilidade de navegadores

BCD tables only load in the browser

Veja também