Manipulez couleur ombre texte avec HTML5 type d'entrée couleur

Question

Je tente de changer la couleur d'une ombre du texte en utilisant le type d'entrée couleur HTML5:

<script> 
$('#shadowcolor').on('change', function() { 
    var shadowcolor = $('#shadowcolor').val(); 
    $('#output').css('text-shadow', '5px 5px shadowcolor'); 
}); 
</script> 

<label class="color" for="shadowcolor">Color</label><input id="shadowcolor" type="color" value="#ff0000" /> 

<div id="output"> 
    <h1>Some Text with a Shadow</h1> 
</div> 

Je ne pense pas que je suis en train de la « shadowColor » variable correctement cependant, car cela ne fait que casser l'ombre. Est-ce que quelqu'un sait comment je pourrais mettre en œuvre cela?

Answer 1

Le problème, ici, est que vous avez essayé de définir la couleur pour être réellement la chaîne "shadowcolor" par opposition à la valeur de la variable. Pour résoudre ce problème, vous devez ajouter la valeur shadowcolor (la variable) à la chaîne "5px 5px ".

Essayez ceci:

$('#output').css('text-shadow', '5px 5px ' + shadowcolor); 

Answer 2

violon travail: http://jsfiddle.net/Hm9ZK/

$('#shadowcolor').on('change', function() { 
var shadowcolor = $('#shadowcolor').val(); 
$('#output').css('text-shadow', '5px 5px' + shadowcolor); 
});