4

我正在尝试更改模糊按钮的 CSS。我怀疑这可能是一个串联问题，但我无法弄清楚我做错了什么。这是我的代码...

HTML

<input type="text" value="blue" id="textinput">
<button>Button</button>
<span id="color">red</span>

CSS

button {
 background-color:blue;
 background-image: -webkit-linear-gradient(top, white 0%, black 100%);    
}

jQuery

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + '100%)'       });
     }, 500);
});​

小提琴链接

http://jsfiddle.net/krishollenbeck/p2jah/20/

当我删除渐变 CSS 时它工作正常。所以我猜我连接变量是错误的。但是我已经尝试了多种方法，但似乎无法弄清楚。这可能是非常明显的事情。

还要注意。我正在使用 webkit 渐变，所以在 chrome 或 safari 中进行测试。在此先感谢您的帮助。

4

2 回答 2

6

您在保存颜色的变量和百分比字符串之间缺少空格。

'-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'
                                                        ^
                                                        |
                                                        +-- Here

调试这种情况的一个好方法是使用console.log查看连接字符串的结果。例如，在这种情况下，您会得到red100%而不是red 100%.

恕我直言，一种不太容易出错的替代方法是使用String.format(). 这样，您可以（更）清楚地看到您是否遗漏了什么：

'-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format(endColor)

注意有些浏览器不支持这个函数，但是你可以使用这个pollyfill 来定义它。

于 2012-08-30T19:36:12.293 回答
5

您缺少逗号和空格（请参阅 Joao 的回答）

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor, // < here        -> this way too               v here
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'       });
     }, 500);
});​
于 2012-08-30T19:37:09.620 回答