使用 jscolor picker 改变 div radial-gradient color

Question

我有这个 div，里面有一张图片。我怎样才能让 jscolor picker 改变径向渐变的一个颜色值 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)';

Answer 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">

使用 jscolor picker 改变 div radial-gradient color

Use jscolor picker to change div radial-gradient color

javascript

jscolor