Как изменить цвет линейного градиента с помощью другого файла css?изменение цвета линейного градиента
background: linear-gradient (0deg, blue 12%, transparent 12%);
Возможно или нет? Я не могу изменить проценты, потому что это происходит из javascript.
Я полагаю, вы пытаетесь сделать индикатор выполнения CSS. Я кодирую эти предложения для вашей цели.
Если вам нужно изменить цвет или процент градиента вы просто назвать их из JavaScript: Может быть вид:
var your_var_color1 = document.getElementById("color").value;
document.getElementById("your_element").style.background = "linear-gradient(to right, " + your_var_color1 + " 0%, " + your_var_color1 + " " + (value1 – 20) + "%, rgba(255,255,255,1) " + value1 + "%, rgba(255,255,255,1) 100%)";
Где:
- первое значение (первый цвет) , будет составлять от 0% до значение1
- 2º значения - при 1-е color's градиента старт ((значение1 - 20) значению1)
- 3о значение - при 2 ° начинаются цвета (в lue1)
- 4º значение - когда заканчивается 2 цвет ... (100% в этом случае)
I'm не устанавливая значение между 2 ° и 3 ° значение, когда первый цвет отделка и второй начинается что означает, будет установка автоматически исходя из других значений ...
Надеется, что это поможет ...
Примечание: Использование RGBA (255,255,255,1) (белых) для имитации прогресса бара с цветом для процентов и белый не заполнено.
Отредактировано: Вы можете установить цвет с обратной стороны (передавая значение с сервера) или установить его по фронту (я полагаю, вы ищете этот). Просто создайте <input type=text.../>, где пользователь вводит цвет (вы должны проверить ошибки) или поле со списком с предопределенными цветами и получить его значение в js. Добавлен короткий пример.
попробуйте '! Important' в файле css – Dave
вы можете уточнить, что вы хотите, пожалуйста, я не могу понять, что вам нужно, звучит как специфика или проблема заказа. – Pete
Вопросы, требующие помощи кода, должны содержать кратчайший код, необходимый для воспроизведите его ** в самом вопросе ** предпочтительно в [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code- фрагменты /). См. [** Как создать минимальный, полный и проверенный пример **] (http://stackoverflow.com/help/mcve) –