Использование JavaScript для редактирования CSS gradient

Я работаю над редактированием градиентов CSS через JavaScript в Firefox. У меня есть поля ввода, где пользователь может поставить 1. Ориентация 2. Цвета первой 3. второго цветаИспользование JavaScript для редактирования CSS gradient

Вот 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, чтобы пользователь мог создавать свои собственные поля градиента? Я предполагаю, что это единственная строка или две, которые мне понадобятся.

P.S. Я понимаю, что этот пример работает только в Firefox. Я просто хочу, чтобы концепция была выключена, прежде чем работать с разными браузерами.

источник

2013-02-25 onTheInternet

Начать с чем-то вроде следующего:

var dom = document.getElementById('mainHolder'); 
dom.style.backgroundImage = '-moz-linear-gradient(' 
     + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

Если вам необходимо поддерживать больше браузеров, чем Firefox, это необходимо будет сделать в сочетании с любым браузером нюхают или некоторые Modernizr, как функция обнаружения.

Ниже приведен пример того, как это можно сделать, используя функцию обнаружения, аналогичную Modernizr (проверена в 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 + ')';

источник

2013-02-25 16:16:01

Это сработало !!! Я не понимал, что так легко. Спасибо огромное! – onTheInternet

@ user2070478: Я добавил пример того, как поддерживать различные браузеры. Обратите внимание, что IE9 и ранее не поддерживают градиенты. Кроме того, для ранних версий webkit существует другой синтаксис, который не распространяется. –

Вы ответили на мой вопрос два дня назад, но я все равно продолжу этот ответ. Спасибо! – onTheInternet

Использование JavaScript для редактирования CSS gradient

ответ

Смежные вопросы