Resumo : neste tutorial, você aprenderá como usar o setAttribute()
método JavaScript para definir um valor para um atributo em um elemento especificado.
Introdução ao setAttribute()
método JavaScript
Para definir o valor de um atributo em um elemento especificado, você usa o setAttribute()
método:
element.setAttribute(name, value);
Linguagem de código: CSS ( css )
Parâmetros
Especifica o name
nome do atributo cujo valor está definido. Ele é automaticamente convertido em letras minúsculas se você chamar o setAttribute()
em um elemento HTML.
Especifica o value
valor a ser atribuído ao atributo. Ele é automaticamente convertido em uma string se você passar um valor que não seja de string para o método.
Valor de retorno
Os setAttribute()
retornos undefined
.
Observe que se o atributo já existir no elemento, o setAttribute()
método atualiza o valor; caso contrário, ele adiciona um novo atributo com o name
and especificado value
.
Normalmente, você usa querySelector()
ou getElementById()
para selecionar um elemento antes de chamar o setAttribute()
no elemento selecionado.
Para obter o valor atual de um atributo, você usa o getAttribute()
método. Para remover um atributo, você chama o removeAttribute()
método.
setAttribute()
Exemplo de JavaScript
Veja o exemplo a seguir:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS setAttribute() Demo</title>
</head>
<body>
<button id="btnSend">Send</button>
<script>
let btnSend = document.querySelector('#btnSend');
if (btnSend) {
btnSend.setAttribute('name', 'send');
btnSend.setAttribute('disabled', '');
}
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, selecione o botão com o id
btnSend
usando oquerySelector()
método. - Segundo, defina o valor do
name
atributo parasend
usar osetAttribute()
método. - Terceiro, defina o valor do
disabled
atributo para que quando os usuários clicarem no botão, ele não faça nada.
Observe que o disabled
atributo é especial porque é um atributo booleano. Se um atributo booleano estiver presente, qualquer que seja o valor que ele tenha, o valor será considerado true
. Para definir o valor de um atributo booleano como false
, você precisa remover o atributo inteiro usando o removeAttribute()
método.
Resumo
- Use
setAttribute()
para definir o valor de um atributo em um elemento especificado. - Definindo o valor de um atributo booleano para qualquer valor, esse valor será considerado como
true
.