我正在嘗試根據用戶選擇更改漸變的顏色，我一切正常，但我只是不知道如何使用我擁有的格式更改漸變。( change.style.background = "linear-gradient(90deg, color1, red)";)。
const len = document.querySelectorAll("input").length;
let change = document.querySelector(".body");
for (let x = 0; x < len; x ) {
document.querySelectorAll("input")[x].addEventListener("input", function() {
let color1 = this.value;
if (this.getAttribute("name")==="color1") {
change.style.background = "linear-gradient(90deg, color1, red)";
}
});
}.body{
background:linear-gradient(90deg, blue, red);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body class="body">
<h1>Background Generator</h1>
<input type="color" name="color1" value="#996DAD">
<input type="color" name="color2" value="#23AD23">
</body>
</html>uj5u.com熱心網友回復：
您可以使用模板文字將顏色選擇器值動態插入到 CSS 中。
input此外，您可以利用“事件委托”并僅設定一個事件處理程式，而不是遍歷所有元素然后為每個元素設定事件處理程式。
const picker1 = document.querySelector("input[name='color1']");
const picker2 = document.querySelector("input[name='color2']");
// No need to loop over all the input elements and set up an event
// handler for each. Just set up one event handler at a common ancestor
// of the elements you care about and let the event bubble up to be
// handled there
document.addEventListener("input", function(event){
// Now test to see if the event was triggered by an element you
// wish to handle
if(event.target.classList.contains("colorPicker")){
// Use template literals to insert JS values into a string:
document.body.style.background =
`linear-gradient(90deg, ${picker1.value}, ${picker2.value})`;
}
});.body{
background:linear-gradient(90deg, blue, red);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<h1>Background Generator</h1>
<input type="color" name="color1" value="#996DAD" class="colorPicker">
<input type="color" name="color2" value="#23AD23" class="colorPicker">
<script src="script.js" charset="utf-8"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/479005.html
標籤：javascript css 线性梯度