Aplicando style com os valores armazenados em variáveis.

Mudando o estilo com JavaScript.

Hoje vamos mudar o estilo de um titulo, apertando botões, e esses botões vão passar o nome de uma variável que estará guardando o estilo.

Primeiro construir o HTML basico, contendo <H1> e <button>.

<button id="estilo1">Estilo 1</button>

<button id="estilo2">Estilo 2</button>

<br>

<h1 id="resultado"> Titulo </h1>

Vamos para o nosso JS.

Segunda parte colocar o ID em variáveis.

let estilo1 = document.getElementById('estilo1');

let estilo2 = document.getElementById('estilo2');

let resultado = document.getElementById('resultado');

Terceira parte criar a variáveis em forma de ARRAY para guardar os valores.

var bt1 = { color: 'red', fontSize: '1rem',}

var bt2 = { color: 'blue', fontSize: '3rem',}

Quarta parte, vamos usar o ID do botão e colocar um evento de Click, e passar um parâmetro que vai conter o nome da variável.

estilo1.addEventListener('click', ()=> ativar(bt1) )

estilo2.addEventListener('click', ()=> ativar(bt2) )

Quinta parte, criar uma função construtora que recebe o paramento bt1 ou bt2 e dentro aplicar o estilo no titulo.

function ativar(event){

resultado.style.color = event.color;
resultado.style.fontSize = event.fontSize;

}

Está pronto, com poucas linhas de código criamos uma função construtora e armazenamos os estilo em variáveis


Veja também como criar animação com scroll.

https://desenvolvedor-web.blogspot.com.br/2018/01/animacao-com-scroll-usando-javascript.html