Element: método setAttribute()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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
# ref-for-dom-element-setattribute①

Compatibilidade de navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setAttribute

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também