Aprimorando a interface: Técnicas de estilização com CSS e JavaScript

CursoCriando uma aplicação com área administrativa utilizando o Laravel

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.