0

JavaScript Básico-capturando elementos HTML e estilizando via JS

#JavaScript
Diego Morais
Diego Morais

     Em Javascript podemos capturar um elemento HTMl ,guarda-lo em uma variável e assim poder manipulá-lo facilmente. Irei te explicar pelo menos 3 formas de fazer essa captura de elementos. Vamos aprender seguindo o passo á passo:

Incentivo fortemente á seguir o passo á passo para compreensão do conteúdo😊

 

        Passo1: Adicione três tags <p> em seu documento HTML,adiciona uma classe á duas delas e um id á outra

 

   <p id="txt">capturando elementos HTML-Id</p>
   <p class="texto">capturando elementos HTML-classe</p>
   <p class="texto" >capturando elementos HTML-tag</p>

 

Passo2: Talvez esteja se perguntando por quê três tags <p>,certo? Bem ,criamos essas três tags pois usaremos três formas diferentes de capturar o elemento que são essas:

  1. Pelo seu id
  2. Pela sua classe
  3. Pelo seu nome de tag


 

Passo3: Nesse passo vamos capturar o elemento usando o método getElementById(),esse método recebe entre parênteses o id adicionado ao elemento html desejado .

Abaixo vamos capturar a tag <p> com o id,coloca-lo em uma variável e aplicar um estilo CSS:

 

 var textId=document.getElementById('txt')
  textId.style.color='white'   //aplicando cor 
  textId.style.backgroundColor='blue'  //aplicando cor de fundo
  textId.style.padding='15px'         //aplicando espaço interno
  textId.style.borderRadius='15px'   //aplicando borda arredondada

 

 

Passo4: Nesse passo vamos capturar o elemento usando o método getElementsByClassName(),esse método recebe entre parênteses a classe adicionada ao elemento html desejado .

Observação: quando queremos capturar elementos pela sua tag ou sua classe temos que especificar a posição desse elemento com aquela classe ou tag dentro de um array ,pois se tratam de uma coleção de elementos. Por exemplo imagine que tenho dois elementos html com uma determinada classe mas queremos adicionar estilo apenas á um desses elementos ,no caso o segundo elemento, então adicionamos á posição 1,já que a primeira é 0.

Dificil?Vamos ver na prática

Abaixo vamos capturar a tag <p> com a classe, coloca-lo em uma variável e aplicar um estilo CSS:

var textClass=document.getElementsByClassName('texto')[0]
  textClass.style.color='white'   //aplicando cor 
  textClass.style.backgroundColor='green'  //aplicando cor de fundo
  textClass.style.padding='15px'         //aplicando espaço interno
  textClass.style.borderRadius='15px'   //aplicando borda arredondada
</script>

 

Passo5: Nesse passo vamos capturar o elemento usando o método getElementsByTagName(),esse método recebe entre parênteses a tag na qual queremos capturar e especificamos a posição do elemento tag especifico que queremos, assim como no caso da classe .

 

  var textTag=document.getElementsByTagName('p')[2]
  textTag.style.color='white'             //aplicando cor 
  textTag.style.backgroundColor='orange'  //aplicando cor de fundo
  textTag.style.padding='15px'         //aplicando espaço interno
  textTag.style.borderRadius='15px'   //aplicando borda arredondada

 

Estão ai 3 formas de captura de elementos html via javascript, existe outra muito conhecida falarei sobre ela em outro artigo 😊

Dê seu feedback sobre esse artigo😊

Se gostou compartilha com quem também está estudando essa poderosa linguagem😊

Se ficou alguma dúvida comente aqui e te ajudarei😊




________________________________________

 Me siga para mais dicas e tutoriais para iniciantes😊


Me siga no GitHub: https://github.com/DiegoDevJR

Me siga no Linkedin: https://www.linkedin.com/in/diego-dutra-b811b31aa/


0
19

Comentários (0)

Estudante e Amante de programação

Brasil