因此,我做了a very simple custom jQuery gradient color picker,用户可以在其中将某些HTML元素的颜色更改为所需的任何渐变。但是,与此相关的问题是,没有多少人知道如何创建渐变。每次这样做都会是一个巨大的麻烦。像这样说:
#id {
background: linear-gradient(to right, blue, red);
}
有了这个,用户每次都必须输入,以实现蓝色->红色在左->右方向上的渐变。因此,我尝试创建a script来简化所有操作。但是,如您所见,它实际上并不起作用。
基本上,我创建了3个输入框:一个用于渐变运动(例如,向右,向左等),一个用于开始渐变颜色,一个用于结束渐变颜色。用户将填写这些值,我将使用.val()抓取所有这些值,然后创建一个包含该值的最终变量:
'linear-gradient(to gradientMotionVariable, beginningGradientColor, endingGradientColor)'
然后,最后,将div的background属性更改为该变量。我尝试同时在Google和SO上搜索,但是找不到任何东西。任何帮助将不胜感激。
最佳答案
$(document).ready(function () {
$('#sgCp').click(function () {
var gM = $('#cGp-motion').val();
var bC = $('#cGp-bC').val();
var eC = $('#cGp-eC').val();
var FGC = 'linear-gradient(to ' + gM + ', ' + bC + ', ' + eC + ')';
$('#cPr').css('background', FGC);
});
});
您的代码的问题在于,您要向CSS传递一个实际上不使用变量值但传入变量名称的值。
看到你的:
var FGC = 'linear-gradient(to gM, bC, eC)';
与我相比:
var FGC = 'linear-gradient(to ' + gM + ', ' + bC + ', ' + eC + ')';