JavaScript setAttribute – Acervo Lima Tutorials

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 namenome do atributo cujo valor está definido. Ele é automaticamente convertido em letras minúsculas se você chamar o setAttribute()em um elemento HTML.

Especifica o valuevalor 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 nameand 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 btnSendusando o querySelector()método.
Segundo, defina o valor do nameatributo para sendusar o setAttribute()método.
Terceiro, defina o valor do disabledatributo para que quando os usuários clicarem no botão, ele não faça nada.

Observe que o disabledatributo é 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.