Question

要求：当每种颜色更改时，html都会显示

linear-gradient(to right,rgb(x,x,x),rgb(x,x,x))

但是，每次更改颜色时，我的代码都会显示出来。

我不必每次都出现，只需更改rgb的值

是否存在改进的方法来显示线性梯度？

在我的js中：

   var css = document.querySelector("h3");
   var color1 = document.querySelector(".color1");
   var color2 = document.querySelector(".color2");
   var body = document.getElementById("gradient");

   function setGradient() {
    body.style.background = 
    "linear-gradient(to right, " 
    + color1.value 
    + ", " 
    + color2.value 
    + ")";

    css.textContent = body.style.background + ";";
   }

   //set initial value in the first load page
   setGradient();

   //display linear gradient value
   body.addEventListener("input",function(){
    var p = document.createElement("p")     
    p.appendChild(document.createTextNode("linear-gradient(to right,"+ 
    color1.value+ ","+ color2.value+ ")"));
    body.appendChild(p);
    })

    color1.addEventListener("input", setGradient);

    color2.addEventListener("input", setGradient);

在我的html中：

       <h1>Background Generator</h1>
       <input class="color1" type="color" name="color1" value="#00ff00">
       <input class="color2" type="color" name="color2" value="#ff0000">
       <h2>Current CSS Background</h2>

在我的CSS中：

    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); /* Standard 
        syntax */
       }

Answer 1

这里是使用document.querySelectorAll然后绑定change的事件侦听器的方法。请注意，css.textContent = body.style.background + ";";是在setGradient()之后并在change事件监听器中设置的

 var css = document.querySelector("h3");
   var color1 = document.querySelector(".color1");
   var color2 = document.querySelector(".color2");
   var body = document.getElementById("gradient");
	 
   function setGradient() {
    body.style.background = 
    "linear-gradient(to right, " 
    + color1.value 
    + ", " 
    + color2.value 
    + ")";
   
  
   }

   //set initial value in the first load page
   setGradient();
	 css.textContent = body.style.background + ";";//for first initialization
   //display linear gradient value
   var elementsArray = document.querySelectorAll('.color1, .color2');//store the input to var

    elementsArray.forEach(function(elem) {//iterate it, and bind change event listener for each
        elem.addEventListener("change",function(){
            css.textContent = body.style.background + ";";
         })
    });
 

    color1.addEventListener("input", setGradient);

    color2.addEventListener("input", setGradient);

  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); /* Standard 
        syntax */
       }

 <body id="gradient">
    <h1>Background Generator</h1>
       <input class="color1" type="color" name="color1" value="#00ff00">
       <input class="color2" type="color" name="color2" value="#ff0000">
       <h2>Current CSS Background</h2>
<h3>
</h3>
  </body>

如何不增加显示p元素

1 个答案: