操纵文字阴影颜色与HTML5色彩输入型

Question

我试图改变使用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> 

我不认为我设置“则shadowColor”然而，正确的变量，因为这只是打破了阴影。有谁知道我可以如何实现这一点？

Answer 1

问题在于，您试图将颜色设置为字符串"shadowcolor"而不是变量的值。要解决此问题，您需要将shadowcolor（变量）的值附加到字符串"5px 5px "上。

试试这个：

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

Answer 2

工作小提琴：http://jsfiddle.net/Hm9ZK/

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