Блог

Главная - Вопросы по программированию - Доступ к свойству webkit-gradient с помощью Javascript

Доступ к свойству webkit-gradient с помощью Javascript

#javascript #dom #webkit

#javascript #dom #webkit

Вопрос:

Я пытаюсь изменить свойство webkit-gradient раздела DIV с помощью Javascript. Пользователь вводит два цвета для градиента. Затем, когда пользователь нажимает кнопку, я хочу, чтобы раздел DIV имел фон, показывающий градиент с двумя цветами, выбранными пользователем.

Спасибо

Binu

Комментарии:

1. Вы хотите изменить его только для элемента или для всей таблицы стилей?

Ответ №1:

Если вы знаете, как объединить строки «управления» градиентом, вы просто устанавливаете выражение gradient в качестве значения «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, но едва-едва).

Ответ №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);

});