使用JavaScript编辑CSS渐变 [英] Using JavaScript to edit CSS gradient
问题描述
我在Firefox工作的编辑CSS渐变通过JavaScript。
我有输入框，用户可以把
1.方向
2月1日的颜色
3.第二颜色
I am working on editing CSS gradients through JavaScript in Firefox. I have input boxes where the user can put 1. Orientation 2. 1st Color 3. 2nd Color
下面是HTML
<html>
<head>
<title>Linear Gradient Control</title>
<script>
function renderButton(){
var orientation = document.getElementById("firstValue").value;
var colorOne = document.getElementById("firstColor").value;
var colorTwo = document.getElementById("secondColor").value;
//alert(orientation);
//alert(colorOne);
//alert(colorTwo);
};
</script>
<style>
#mainHolder
{
width:500px;
background: -moz-linear-gradient(left, green, red);
}
</style>
</head>
<body>
<h1>Gradient Editor</h1>
<form>
<input type="text" id="firstValue">orientation</input><br />
<input type="text" id="firstColor">first color</input><br />
<input type="text" id="secondColor">second color</input><br />
</form>
<button type="button" onclick="renderButton()">Render</button>
<div id="mainHolder">Content</div>
</body>
</html>
所以要回顾一下，用户将指定他们的3个值，其中获得传递给函数'renderButton（）;。什么线我可以用它来改变CSS3渐变的3个值，使用户可以自己定制的梯度箱？我假设其唯一的一两行，我需要。
So to recap, the user will specify their 3 values, which get passed to the function 'renderButton();'. What line can I use to change the 3 values of the CSS3 gradient so that the user can make their own custom gradient boxes? I'm assuming its only a line or two that I will need.
P.S。我知道这个例子只适用于Firefox。我只是想在不同的浏览器中工作之前得到的概念了。
P.S. I realize this example only works in Firefox. I just want to get the concept down before working on different browsers.
推荐答案
开始用类似如下：
var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
如果您需要支持比Firefox更多的浏览器，这将需要结合做既与浏览器嗅探或者一些Modernizr的类似特征检测。
If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection.
下面是如何可以做到这一点，使用功能检测类似Modernizr的。
Below is an example of how this can be done, using feature-detection similar to Modernizr (tested in Firefox, Chrome, Safari, Opera).
// Detect which browser prefix to use for the specified CSS value
// (e.g., background-image: -moz-linear-gradient(...);
// background-image: -o-linear-gradient(...); etc).
//
function getCssValuePrefix()
{
var rtrnVal = '';//default to standard syntax
var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];
// Create a temporary DOM object for testing
var dom = document.createElement('div');
for (var i = 0; i < prefixes.length; i++)
{
// Attempt to set the style
dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';
// Detect if the style was successfully set
if (dom.style.background)
{
rtrnVal = prefixes[i];
}
}
dom = null;
delete dom;
return rtrnVal;
}
// Setting the gradient with the proper prefix
dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
这篇关于使用JavaScript编辑CSS渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
