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