Utilisation de JavaScript pour modifier le gradient CSS
je travaille sur l'édition des gradients CSS par JavaScript dans Firefox. J'ai des boîtes d'entrée où l'utilisateur peut mettre 1. Orientation 2. 1er de la Couleur 3. 2e couleur
voici le 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>
pour récapituler, l'utilisateur spécifiera ses 3 valeurs, qui seront passées à la fonction 'renderButton();'. Quelle ligne puis-je utiliser pour changer les 3 valeurs du gradient CSS3 afin que l'utilisateur puisse créer ses propres boîtes de gradient personnalisées? Je suppose que c'est seulement une ligne ou deux que je aurez besoin.
<!-Je me rends compte que cet exemple ne fonctionne qu'avec Firefox. Je veux juste obtenir le concept avant de travailler sur différents navigateurs.1 réponses
Démarrer avec quelque chose comme:
var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
+ orientation + ', ' + colorOne + ', ' + colorTwo + ')';
si vous avez besoin de prendre en charge plus de navigateurs que Firefox, cela devra être fait en combinaison avec l'un ou l'autre navigateur-reniflage ou une détection de fonctionnalité de type Modernizr.
ci-dessous est un exemple de la façon dont cela peut être fait, en utilisant la fonctionnalité de détection similaire à Modernizr (testé dans 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 + ')';