Question

我正在尝试使用Javascript通过事件侦听器动态更改背景，这些事件侦听器正在侦听输入type =“ color”字段上的“ input”。从托盘中选择一种颜色后，单击颜色输入字段时，背景颜色会正确更改。但是，我希望背景随着用户滚动托盘而动态变化，而不仅仅是在他选择最终颜色时。希望我很清楚，在此先感谢！

/* Variables Caching */
var h3 = document.querySelector("h3");
var input_left = document.querySelector("#color_selector_1");
var input_right = document.querySelector("#color_selector_2");

/* Function Declerations */
function colorChange()
{
  // edit body style accordingally
  var newStyle = changeBodyStyle();
  // edit h3
  editH3(newStyle);
}

function editH3(new_body_style)
{
  h3.textContent = "";
  h3.textContent = new_body_style;
}

function changeBodyStyle()
{
    var new_background = "linear-gradient(to right, " + input_left.value.toString() + ", " + input_right.value.toString() + ")";
    document.body.style.background = new_background;
    return new_background;
}

/* Adding Event Listeners */
input_left.addEventListener("input", colorChange);
input_right.addEventListener("input", colorChange);

body{
  font: 'Raleway', sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  top: 15%;
  background: linear-gradient(to right, red, yellow);
}

h1{
  font: 600 3.5em 'Raleway' , sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  width: 100%;
}

h3 {
  font: 900 1em 'Raleway' , sans-serif;
  color: rgba(0,0,0,0.5);
  text-align: center;
  text-transform: none;
  letter-spacing: 0.01em;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Gradient Background</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      <h1>Background Generator</h1>
      <h2>Current CSS Background</h2>
      <h3>
          <h4>this is a test</h4>
      </h3>
      <input type="color" id="color_selector_1" value="#00ff00">
      <input type="color" id="color_selector_2" value="#ff0000">

      <!-- JavaScript -->
      <script type="text/javascript" src="script.js">
      </script>
  </body>
</html>

Answer 1

您需要构建自己的颜色选择器，或使用第三方的颜色选择器，而不是依赖于内置在浏览器中的颜色选择器。内置到浏览器中的浏览器不会在用户单击“确定”之前将用户的选择传达回该页面，因此无法用它来做您想做的事情。

使用“输入”事件动态更改背景色

1 个答案: