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
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>
.
<button>Hello World</button>
JavaScript
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 atributoname
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 atributodisabled
para a string vazia (""
), estamos definindodisabled
comotrue
, 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