Question

我正在尝试使用Javascript更改DIV部分的webkit-gradient属性。用户为渐变输入两种颜色。然后当用户点击一个按钮时，我希望DIV部分的背景显示用户选择的两种颜色的渐变。

由于

BINU

Answer 1

如果您知道如何将渐变“控制”字符串放在一起，则只需将渐变表达式设置为元素“样式”上“backgroundImage”的值。

document.getElementById("yourDiv").style.backgroundImage = "-webkit-gradient(whatever)";

当然，“无论”部分有点复杂;可能你想要的东西：

var whatever = "linear, 0 0, 100 0, color-stop(0, " + color1 + "), color-stop(1, " + color2 + ")";

document.getElementById("yourDiv").style.backgroundImage = "-webkit-gradient(" + whatever + ")";

我刚刚组成的线端点;你使用的具体取决于你想要的渐变效果，你应该自己玩。 Here's a jsfiddle.（使用jQuery，但几乎没有）。

Answer 2

此处的工作示例：http://jsfiddle.net/ezmilhouse/4gbAW/

渐变计算可能变得非常大，请查看http://gradients.glrzad.com/以获取灵感。

你的HTML：

<div id="gradient"></div>
<br/>
<br/>
<input type="text" value="#2446ab" id="color_1" />
<input type="text" value="#1867c8" id="color_2" />
<input type="button" value="Get Gradient!" />

你的js：

$( 'input[type="button"]' ).live( 'click', function(){

    var col1 = $('#color_1').val();
    var col2 = $('#color_2').val();
    var css = '-webkit-gradient(linear,left bottom,left top, color-stop(0.30, ' + col1 + '),color-stop(0.50, ' + col2 + '))';

    $('#gradient').css('background-image', css);

});

使用Javascript访问webkit-gradient属性

2 个答案: