HTML adicionar um botão mais javascript

[Kijin]

Então.. gostaria de saber como faço para inserir botões para mudar.

 

1° Cor do fundo

2° Cor do container

3° Cor da fonte 

4° Cor dos titulos 

5° Aumentar tamanho da fonte

6° Diminuir tamanho da fonte

 

Creio eu que envolve JS.

E sou super iniciante, gostaria de saber como criar isso.

 

( Lembrando que o user escolhe a cor, que seja bem parecido com aquela palheta de cores do paint ) 

 

    <div id="container">
<container>

    <div id="nav">
    <a href="#HTML" style="color: whitesmoke">HTML</a>
        <a href="#CSS" style="color: whitesmoke">CSS</a>
        <a href="#JAVASCRIPT" style="color: whitesmoke">JAVASCRIPT</a>
    </div>

    </container>

 

[DiF]

8 horas atrás, Kijin disse:

1° Cor do fundo

2° Cor do container

3° Cor da fonte 

4° Cor dos titulos 

Olá,  para fazer isso, você pode usar o plugin de color picker do bootstrap: https://farbelous.io/bootstrap-colorpicker/

Existem outros, mas esse parece ser mais fácil.

 

8 horas atrás, Kijin disse:

5° Aumentar tamanho da fonte

6° Diminuir tamanho da fonte

Você pode usar as dicas deste post:  https://www.pair.com/support/kb/resize-sites-font-jquery/

Basicamente ali tem código e explicação de como funciona.

 

Só lembre-se de que de alguma forma, você tem que salvar os dados...  há duas formas: local storage ou banco de dados.

No banco de dados é mais simples, envolve o php e ajax.

[Kijin]

Em 15/06/2019 às 13:29, DiF disse:

Olá,  para fazer isso, você pode usar o plugin de color picker do bootstrap: https://farbelous.io/bootstrap-colorpicker/

Existem outros, mas esse parece ser mais fácil.

 

Você pode usar as dicas deste post:  https://www.pair.com/support/kb/resize-sites-font-jquery/

Basicamente ali tem código e explicação de como funciona.

 

Só lembre-se de que de alguma forma, você tem que salvar os dados...  há duas formas: local storage ou banco de dados.

No banco de dados é mais simples, envolve o php e ajax.

 

 

Mas o de mudar a cor somente o:

 

<input type="color" id="cor" onchange="document.getElementById('corpo').style.backgroundColor=this.value;">

 

Não seria o suficiente?

[DiF]

@Kijin Sim, você pode usar desta forma, mas por ser um atributo relativamente novo, não são todos os navegadores que suportam.. como por exemplo o IE11 e mais antigos ou o Safari 9.1 e mais antigos.

Em alguns casos, você iria ter que ter a intervenção do javascript para criar o elemento, nisso o plugin jQuery é melhor.

 

Mas, de um jeito mais prático, se não se importar com outros navegadores, pode usar desta forma que mencionou.

6 horas atrás, Kijin disse:

Mas o de mudar a cor somente o:

Mudar a cor de que? você tem vários pontos ali.. rsrs