Mudança da cor de fundo em JavaScript

[start2013 0]

Boa tarde , como eu faço que a cor fornecida pelo usuário troque o background ?

<input type="colorbg" id="colorbg" name="colorbg">

[William Bruno 1501]

Em algum evento disparado pelo usuário, pode ser onclick, onkeypress..

 

vc atribui na propriedade .style do elemento que vc quer trocar, a nova cor na regra css .backgroundColor

[start2013 0]

William Bruno , você poderia fazer uma amostra ?

 

Sou novo na área de JS, não sei muita coisa .

 

seria assim document.getElementById.style.backgroundColor ?

[William Bruno 1501]

<input type="text" id="colorbg" name="colorbg" value="#000000">

<script>
var $colorbg = document.getElementById("colorbg"),
    $body = document.body;

$colorbg.addEventListener("blur", function(){
    $body.style.backgroundColor = this.value;
});
</script>

estou disparando no onblur do input. Mude o valor hexadecimal, e saia dele, para aplicar a cor no body.

[xanburzum 169]

para ficar mais interativo, aconselho a colocar um jQuery ColorPicker, após o user selecionar a cor no colorpicker vc atribui ele no background. Depois você pega o click do usuário e faz a mágina:

 

 

$('.seletor_de_Cor').click(function(){

    $('elemento_que_vc_quer_que_mude_de_cor').css('background', $(this).css("background"));
});

Ou através de um campo text onde o user digitará a cor

 

 

[start2013 0]

E para mudar cor da font mesma forma ?

[William Bruno 1501]

sim, mesma forma.

 

Ai vc usa a regra .color

[start2013 0]

<div id="alterarcordotexto">
    
   <p>Tópicos que também usam as tags Javascript:</p>
 </div>  

var $colorbg = document.getElementById("alterarcordotexto"),
$body = document.body;

$colorbg.addEventListener("blur", function(){
$body.style.color = this.value;
});

<form>
<input type="text" id="alterarcordotexto" name="alterarcordotexto">

<input type="button" name="enviar" value="alterarcordotexto">

</form>

Onde estou errando ?

[William Bruno 1501]

O elemento:

$colorbg 

é o input que recebe o valor do usuário.

$body

é o elemento a ser alterado.

 

Leia o código com um pouco mais de calma.

[start2013 0]

Obrigado mano consegui , agora não esqueço mais .

 

Outra Dúvida que tenho é : Como eu faço pra chamar a cor só com o botão ?

[xanburzum 169]

Implementa um color-picker fica mais interativo

[start2013 0]

Obrigado pela dica cara , mas eu preciso fazer a cor mudar quando clicar no botão .

 

Tipo , eu coloco a cor no input e clico fora e a cor muda , eu quero que a cor só mude quando clicar no botão .

[William Bruno 1501]

troque o blur por um click do botão.

[xanburzum 169]

também pode ser feito no color-picker

[William Bruno 1501]

Oi @xanburzum, já é a terceira vez q vc fala isso.. hehe

calma cara, ele já ouviu.. se quiser ele vai fazer se não, não adianta ficar repetindo.

[start2013 0]

Vlw William Bruno, consegui fazer a coisa do click , mas eu não consegui fazer funfar só com o button . Só está funfando com o input , coloco a cor e clico dentro do input , aí funciona.

[Fiote 24]

@xanburzum, pare de tentar forçar frameworks na goela do cara.

 

Pra iniciantes (que querem APRENDER de verdade), a melhor coisa é usar javascript puro.

[William Bruno 1501]

<input type="text" id="colorbg" name="colorbg" value="#000000">

<input type="button" id="btn" value="ok" />

 

 

<script>

var $colorbg = document.getElementById("colorbg"),

$btn = document.getElementById("btn"),

$body = document.body;

 

$btn.addEventListener("click", function(){

$body.style.backgroundColor = $colorbg.value;

});

</script>