Como adicionar o atributo readonly com JavaScript

Neste artigo você vai aprender a como adicionar o atributo readonly com JavaScript, utilizando apenas uma linha de código!

Fala programador(a), beleza? Bora aprender mais sobre DOM, atributos de HTML e JavaScript!

Nós precisamos primeiramente selecionar o elemento que o atributo precisa ser adicionado

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Este elemento, que provavelmente será um input, pode ser selecionado com um dos seguintes métodos:

• querySelector;
• getElementById;

Há outros métodos, mas estes são suficientes para o que precisamos fazer

Depois, vamos utilizar o método setAttribute, configurado com dois parâmetros, que são: readonly e true

Isso é o suficiente para resolver o problema, veja por meio de código:

const input = document.querySelector("input")

input.setAttribute("readonly", true)

Qualquer atributo pode ser adicionado utilizando esta mesma abordagem

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como adicionar o atributo readonly com JavaScript

Utilizamos o método setAttribute, com a configuração de dois parâmetros

Foi necessário também selecionar o elemento através do DOM, no artigo utilizamos querySelector, mas há outros métodos para o mesmo fim

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!