Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  .normal_gradient {
    background: -webkit-gradient(linear, left top, left bottom,
                                 from(#ccc), to(#000));
    background: -moz-linear-gradient(top,  #ccc,  #000);
    filter: progid:DXImageTransform.Microsoft.gradient(
                  startColorstr='#cccccc', endColorstr='#000000');
    color:#fff
  }
</style>

<div class='normal_gradient'>foo</div>
<div class='dynamic_gradient'>bar</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
$('.dynamic_gradient').css({
  background: ('-webkit-gradient(linear, left top, left bottom,' +
                               'from(#ccc), to(#000));')})
</script>

应用正常渐变，但动态设置不会。为什么不？在谷歌浏览器中运行此功能。

Answer 1

最后的分号不应该用于JavaScript。

请参阅： http://jsfiddle.net/nChhf/

而不是：

$('.dynamic_gradient').css({
  background: ('-webkit-gradient(linear, left top, left bottom,' +
                               'from(#ccc), to(#000));')})

这样做：

$('.dynamic_gradient').css({
  background: ('-webkit-gradient(linear, left top, left bottom,' +
                               'from(#ccc), to(#000))')})

或完全相同的事情，但格式更好（并没有连接）：

$('.dynamic_gradient').css({
    background: '-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))'
})

未应用动态渐变

1 个答案: