0

JavaScript Básico-estilizando um elemento com Javascript

#JavaScript #CSS
Diego Morais
Diego Morais

Sabia que voçê pode dar estilo á um elemento HTML  por meio de JavaScript?

Veja o passo á passo em que te mostro como dar estilo ,por exemplo, á um elemento <p></p>



Passo1: Crie no seu html a tag <p> com um texto de sua preferência e especifique um id

 

<p id="texto">Estilização de elementos html por meio de javascript</p>

 

 

Passo2: Capture seu elemento HTML pelo seu id adicionando-o á uma variável

 

 

 var textoP=document.getElementById('texto')

 

 

 

Passo3: Agora vem o momento mais aguardado nesse tutorial: Dar estilo á esse elemento <p>.Vamos lá!!


Para acessarmos as propriedades CSS pelo javascript usamos o .style


Vamos dar os seguintes estilos á esse elemento p :

Um espaçamento interior de 15px

Um cor de fundo azul

Uma cor branca ao texto

Uma bordar arredonda de 15px

 

Ao usar propriedades CSS em Javascript é importante lembrar que essas propriedades se forem formadas por duas palavras devem obedecer á escrita camelCase

 

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

 

Agora que seguiu o passo á passo use sua criatividade e dê estilos aos elementos HTMl usando Js

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/




#javascript#estilização#css#front-end

1
36

Comentários (1)

0
Nicole Silva

Nicole Silva

23/03/2021 16:53

Gostei Demais do exemplos do diego , isso me ajuda muito a desenolver o meu conhecimento .

Estudante e Amante de programação

Brasil