当前位置：文江博客话题详情

使用 Javascript 访问 webkit-gradient 属性

发布于 2024-11-03 09:47:15 字数 131 浏览 0 评论 0原文

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

谢谢

比努

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请爱~陌生人 2024-11-10 09:47:15

如果您知道如何将渐变“控制”字符串放在一起，则只需将渐变表达式设置为元素“样式”上的“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 + ")";

我刚刚制作的线端点；您具体使用什么取决于您想要渐变的外观，您可能应该自己尝试一下。这是一个 jsfiddle。（使用 jQuery，但只是勉强使用）。

If you know how to put the gradient "control" strings together, you simply set the gradient expression up as the value of "backgroundImage" on the element's "style".

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

Of course the "whatever" part is a little complicated; probably you'd want something like:

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

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

The line endpoints I just made up; exactly what you'd use depends on exactly how you want the gradient to look, and you should probably play with that yourself. Here's a jsfiddle. (uses jQuery but just barely).

回复收藏 0 原文

药祭#氼 2024-11-10 09:47:15

工作示例在这里： 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);

});

working sample here: http://jsfiddle.net/ezmilhouse/4gbAW/

gradient calculations can become really big, check out http://gradients.glrzad.com/ for your inspiration.

your 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!" />

your 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);

});

回复收藏 0 原文

~没有更多了~