Question

我有一个带渐变的div，我希望用户能够动态更改。 div风格是：

<div id="colourGradientDiv" style="background: <?php echo $colour_start; ?>; background: -moz-linear-gradient(top,  <?php echo $colour_start; ?> 0%, <?php echo $colour_end; ?> 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,<?php echo $colour_start; ?>), color-stop(100%,<?php echo $colour_end; ?>)); background: -webkit-linear-gradient(top,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); background: -o-linear-gradient(top,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); background: -ms-linear-gradient(top,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); background: linear-gradient(to bottom,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<?php echo $colour_start; ?>', endColorstr='<?php echo $colour_end; ?>',GradientType=0 );">

我使用Ajax通过以下代码更改颜色：

$("#colourGradientDiv").css({"background" : colour_start,
 "background" : "-webkit-gradient(linear, left top, left bottom, color-stop(0%, "+colour_start+"), color-stop(100%, "+colour_end+"))",
 "background" : "-webkit-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)",
 "background" : "-o-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)"
 "background" : "-ms-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)",
 "background" : "linear-gradient(to bottom, "+colour_start+" 0%, "+colour_end+" 100%)",
 "filter" : "progid:DXImageTransform.Microsoft.gradient( startColorstr='"+colour_start+"', endColorstr='"+colour_end+"',GradientType=0 )"
});

上面的代码根本没有对div进行查询。但是，如果我只是设置第一个“背景”属性，那么我改变div的整个颜色，所以我知道我正确地解决了div并且变量colour_start是正确的。

任何人都知道怎么做？

Answer 1

您可以使用jQuery执行以下操作：

$('#block').css({
background: "-webkit-gradient(linear, left top, left bottom, from($colour_start), to($colour_end))" 
});

每当客户改变开始或结束的颜色时调用它。

如何使用jQuery动态更改div的渐变

1 个答案: