使用 jscolor 选择器更改 div 径向渐变颜色答案

【问题标题】：Use jscolor picker to change div radial-gradient color使用 jscolor 选择器更改 div 径向渐变颜色
【发布时间】：2019-07-29 14:16:21
【问题描述】：

我有这个 div，里面有一张图片。如何让 jscolor 选择器更改该 div 中径向渐变的一种颜色值？

<div class="col-md-10 col-md-offset-1" style="background: radial-gradient(1300px circle at 50% 50%, #090b3c, #000000);">
 <img src="../usrimages/cc_270719195202.png" border="0" class="border"><br>
</div>

<!-- And I'm using jscolor as colorpicker: -->

<script>
function update(jscolor) {
    // 'jscolor' instance can be used as a string
    document.getElementById('rect').style.backgroundColor = '#' + jscolor
}
</script>

<input name="clr1" class="jscolor {onFineChange:'update(this)'}">

<!-- Right now it's changing the color to a rectangle: -->

<p id="rect" style="border:1px solid gray; width:161px; height:100px;">

我试过这样的东西：

document.getElementById('gradientbg').style.backgroundColor = 'radial-gradient(1300px circle at 50% 50%, #FF0000, #000000)';

还有这个：

document.getElementById('gradientbg').style.background = 'radial-gradient(1300px circle at 50% 50%, #FF0000, #000000)';

还有这个：

document.getElementById('gradientbg').style.backgroundImage = 'radial-gradient(1300px circle at 50% 50%, #FF0000, #000000)';

【问题讨论】：

你必须设置backgroundImage。您发布的代码不包含您要更新的<div> 上的“id”属性。
我试过这种直接的颜色变化，但没有。如何设置“背景图像”？请帮助我理解，我是菜鸟，正在学习。
我只需要在 div 之后移动脚本，它现在可以工作了。谢谢。

标签： javascript jscolor

【解决方案1】：

将.style.backgroundImage 更改为您的新渐变应该可以：

function changeColor(ev) {
    // 'jscolor' instance can be used as a string
    document.querySelector('.rect').style.backgroundImage = 'radial-gradient(100px circle at 50% 50%, ' + ev.target.value + ', #000000)';

}

document.querySelector("input").onchange = changeColor;

.rect { height: 50px; margin-bottom: 12px; }

<div class="rect" style="background: radial-gradient(100px circle at 50% 50%, #ff0000, #000000);"></div>
<input type="color" value="#ff0000">

【讨论】：