Sabemos da importância de separar as responsabilidades da nossa aplicação em arquivos específicos, como HTML, CSS e Javascript, porém, há momentos que necessitamos manipular CSS diretamente no Javascript. Podemos utilizar duas formas de se estilizar elementos HTML através de propriedades Javascript ou métodos.
Inicialmente faremos a utilização do atributo style, nele vamos inserir nossos estilos CSS diretamente. Na segunda forma utilizaremos o Style Object, que são propriedades CSS dentro do Javascript que se assemelham muito ao CSS padrão.
Vamos partir do ponto que temos dois elementos HTML, um botão e um título H1. Note no código abaixo que ambos contém um atributo ID com seu respectivo valor.
<body>
<button id="btn-alterar-cor">Alterar cor</button>
<hr>
<h1 id="header-principal">Olá, mundo!</h1>
<script src="script.js"></script>
</body>Alterando o CSS com atributo Style
Podemos inicialmente utilizar o o método setAttribute() do Javascript para inserir valores CSS, basta fazer a separação de propriedades por meio do ;.
const btn = document.querySelector('#btn-alterar-cor')
btn.setAttribute('style', 'color: #fff; padding:10px;background-color:#3d3d3d')Perceba que primeiro acessamos o elemento btn através da constante btn, em seguida, utilizamos o método mencionado.
Esta abordagem é funcional e mais simples, pois utilizamos o CSS que já conhecemos, mas desencorajo a utilizá-la, pois você estará colocando CSS no Javascript. Nossa próxima aula será de manipulação de classes com Javascript, utilizando o conceito abordado nela, você poderia criar classes no seu arquivo CSS e aplicar ao elemento, dispensando a necessidade de ter estilos separados em arquivos .css e .js.
Utilizando o Style Object para estilizar elementos HTML
Com o Style Object você entenderá o motivo pelo qual utilizar o atributo CSS é desencorajado, já que agora utilizaremos apenas o Javascript.
Vamos inicialmente criar uma função que altera o estilo do nosso título H1, para isso, primeiramente devemos acessar o elemento através da constante h1, em seguida, utilizamos a propriedade style e por fim, definimos qual propriedade Style Object vamos utilizar.
const alterarTexto = () => {
const h1 = document.querySelector('#header-principal')
h1.innerText = 'Olá, SatellaSoft'
h1.style.color = '#ef3e39'
h1.style.padding = '25px 40px'
}Devemos tomar uma certa atenção na utilização do Style Object, pois não vamos inserir nossas propriedades CSS naturalmente, mas sim propriedades Javascript que se assemelham muito. Veja a tabela de propriedades CSS e Style Objects para entender melhor a diferença.
| CSS | Style Object |
|---|---|
| background-color | backgroundColor |
| font-size | fontSize |
| padding-bottom | paddingBottom |
| text-transform | textTransform |
Em resumo, não leve essa regra ao pé da letra, basicamente você não utilizará o - traço e juntará as palavras. A palavra a frente que era separada pelo traço, deve começar com a inicial na maiúscula.
Calma, para a nossa felicidade existe uma tabela da W3C que contém todas essas informações, então se precisar de algo, basta consultar a tabela que está disponível na seção de referências deste artigo.
Veja abaixo o exemplo completo do nosso Javascript, nele contém uma alteração para o botão quando ele é clicado.
'use strict'
const btn = document.querySelector('#btn-alterar-cor')
//btn.setAttribute('style', 'color: #fff; padding:10px;background-color:#3d3d3d')
btn.addEventListener('click', () => {
btn.style.backgroundColor = '#ef3e39'
btn.style.color = '#fff'
btn.style.border = 'none'
alterarTexto()
})
const alterarTexto = () => {
const h1 = document.querySelector('#header-principal')
h1.innerText = 'Olá, SatellaSoft'
h1.style.color = '#ef3e39'
h1.style.padding = '25px 40px'
}Se você chegou até aqui, te convido a assistir nossa videoaula complementar e turbinar ainda mais o seu conhecimento sobre Style Object.
