Измените linear-gradient с помощью JS / jQuery
Итак, я работаю над проектом, включающим цвет типа ввода. Мне нужно сделать градиент, используя их, как мне это сделать?
Вот цветные метки
<div id = "part1" align=center>
<input type = "color" id = color>
<input type = "color" id = color2>
Обновлено: я только пробовал пробовал
$("body").css("background-color",clr);
но, насколько мне известно, он не может делать градиенты
вы хотите установить цвет, выбранный в качестве фона тела
какие? Я имею в виду, что хочу изменить background: linear-gradient (красный, синий), чтобы я мог использовать input type = "color" для изменения цвета градиента.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку предоставленный вами код не завершен:
- Что означает переменная clr?
- Когда введенное значение вступит в силу на фоне?
Здесь я бы предоставил образец кода, в котором я пытаюсь угадать, что вы хотите сделать, как
I mean I want to change background: linear-gradient(red,blue) so that I can use input type = "color" to change the color of the gradient
Вот пример кода для использования кнопки для назначения фона с цветом градиента. Надеюсь, это поможет тебе.
$("#btn_color").on('click', function(){
var color = $("#color").val();
var color2 = $("#color2").val();
var str = "linear-gradient(" + color + "," + color2 + ")";
$("body").css("background",str);
})<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div id = "part1" align=center>
<input type = "color" id ='color'>
<input type = "color" id ='color2'>
</div>
<button id = "btn_color">Click me </button>
</body>
</html>вам нужно указать значение желаемого градиента в свойстве background
Проверьте этот URL для получения дополнительной информации https://www.w3schools.com/css/css3_gradients.asp
Вот рабочий пример:
function changeBackground(){
const color1 = document.getElementById("color").value;
const color2 = document.getElementById("color2").value;
document.body.style.background = `linear-gradient(${color1}, ${color2})`;
}html, body{
height: 100%;
}<div id = "part1" align = "center">
<input type = "color" id = "color">
<input type = "color" id = "color2">
<button onClick = "changeBackground()">Change background!</button>
</div>
Покажи, что ты пробовал!