使用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);
});