Neste artigo vamos aprender como usar JavaScript para mudar propriedades CSS, de uma maneira fácil de aprender e rápida, para você estilizar os elementos com JS.
Fala programador(a), beleza? Bora aprender a adicionar CSS com JS!
A ideia por trás dessa técnica é muito simples, primeiramente precisamos selecionar o elemento alvo
Seja por classe, id ou query selector, para isso você pode utilizar os métodos:
- getElementById
- getElementsByClassName
- querySelector ou querySelectorAll
Feito isso você precisa acessar a propriedade style do elemento selecionado, e fazer as alterações no CSS
Lembrando que regras como background-color que tem duas palavras, você deve substituir pelo camelCase desta maneira: backgroundColor
Vamos a um exemplo prático:
<!DOCTYPE html>
<html>
<head>
<title>Como usar JavaScript para mudar propriedades CSS</title>
<meta charset="utf-8">
</head>
<body>
<p id="paragrafo">Este parágrafo vai ter o CSS alterado!</p>
</body>
</html>E é isso que aparece no navegador:
Bom, aqui temos uma tag p, com um id de parágrafo, agora vamos selecionar este elemento e alterar o estilo dele com JavaScript
let el = document.getElementById('paragrafo');
// alterando uma propriedade
el.style.color = 'red';
// varias propriedades
el.style.cssText =
'color: blue;' +
'background-color: yellow;' +
'border: 1px solid magenta';Aqui temos duas formas de alterar CSS, uma de propriedade singular e outra de multi propriedades
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
A primeira opção devemos colocar cada propriedade em uma linha, o que pode ser bem custoso caso queiramos estilizar muito o componente
Já na segunda forma concatenamos uma string em várias linhas, o que da uma impressão de CSS e fica organizado, para atingir várias propriedades de uma vez só
Vai da sua escolha e necessidade
E é claro, quando uma linha de código altera uma propriedade que já tinha valor antes, a anterior é substituída ( que é o caso do color )
Veja como fica no navegador:
O elemento recebeu todos os estilos da segunda regra, e o da primeira foi substituído
E é assim que alteramos CSS com JavaScript 😀
Conclusão
Neste artigo vimos usar JavaScript para mudar propriedades CSS
Precisamos selecionar o elemento e depois alterar a propriedade style com a regra que queremos mudar no CSS, por exemplo border
Aí inserimos os valores e o CSS é alterado
Há a possibilidade de alterar múltiplas regras com a propriedade cssText, porém precisamos passar uma string com todas elas
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Maravilhoso esse pulo do gato el.style.cssTex ,me ajudou muito!
show Dave!
el.style.cssText, ajudou muito.
de nada!
Bom dia, Battisti
Excelente dica. Porém, uma outra dúvida me surgiu. Se eu tiver um outro elemento aninhado, onde queira modificar as propriedades apenas do último elemento, ou seja, o que está aninhado (tipo um dentro de um outro )? Desde já, agradeço se puder esclarecer.
Exemplo: Tenho um span de classe = x. Aninhado a este tenho um outro span, onde desejo modificar as propriedades de somente deste último, o que está aninhado. Como eu deveria proceder? let el = documento.getElementsByClassName(‘x’); el.span.style.cssText…?
Descobri uma forma, partindo da dica objeto deste artigo. Bom, segue abaixo acaso alguém também iniciante necessite da solução.
Consideremos como exemplo uma tag span class = x e uma tag span filha direta da primeira.
let el = document.getElementsByClassName(‘x’)[0]; //forma de identificar o elemento pai
let sp = el.children[1]; //identificando o elemento filho desejado. Pela numeração, o 1 representa o segundo filho direto do elemento el
sp.style.cssText =
‘line-height: 100%;’ +
‘padding: 3px;’ +
‘width: 400px’;