如何解决？ DOM JavaScript渐变不起作用？

Question

我需要从“父”元素中获取“子”元素的颜色，并在它们之间进行线性渐变，然后将其插入“渐变”元素中。在警报中，我的样式背景颜色重复了几次。我该如何解决？

function myFunction() {
  var gradientcolor = "";
  var childcolor = document.getElementById("parent").children;
  var i;
  for (i = 0; i < childcolor.length; i++) {
    gradientcolor += childcolor[i].style.backgroundColor + ', ';
    console.log(gradientcolor);
    document.getElementById("gradient").style.backgroundImage = "linear-gradient(to right, " + gradientcolor + " )"
  }
}

<div id="parent">
  <div id="child" style="width:50px;height:50px;background-color:rgb(255, 0, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 215, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 0, 255);"></div>
</div>
<div id="gradient" style="width:150px;height:50px;background-color:#f2f2f2"></div>

<button onclick="myFunction()">Try it</button>

Answer 1

是背景，不是背景图像

此外，您还需要将作业移到循环外

如果使用数组并推入，也不会出现怪异的逗号

此外，尽管您不使用它们，但ID必须是唯一的

function myFunction() {
  var gradientcolor = [];
  var childcolor = document.getElementById("parent").children;
  var i;
  for (i = 0; i < childcolor.length; i++) {
    gradientcolor.push(childcolor[i].style.backgroundColor);
  }
  const statement = "linear-gradient(to right, " + gradientcolor.join(",") + " )"
  console.log(statement)
  document.getElementById("gradient").style.background = statement

}

<div id="parent">
  <div class="child" style="width:50px;height:50px;background-color:rgb(255, 0, 0);"></div>
  <div class="child" style="width:50px;height:50px;background-color:rgb(0, 215, 0);"></div>
  <div class="child" style="width:50px;height:50px;background-color:rgb(0, 0, 255);"></div>
</div>
<div id="gradient" style="width:150px;height:50px;background-color:#f2f2f2"></div>
<button onclick="myFunction()">Try it</button>

没有内联脚本和css的ES6版本

window.addEventListener("load", () => {
  document.getElementById("tryIt").addEventListener("click", function() {
    const gradientcolor = [...document.querySelectorAll("#parent .child")]
      .map(child => child.style.backgroundColor);
    document.getElementById("gradient").style.background = `linear-gradient(to right, ${gradientcolor.join(",")})`
  })
})

.child {
  width: 50px;
  height: 50px;
}

#c1 {
  background-color: rgb(255, 0, 0);
}

#c2 {
  background-color: rgb(0, 215, 0);
}

#c3 {
  background-color: rgb(0, 0, 255);
}

#gradient {
  width: 150px;
  height: 50px;
  background-color: #f2f2f2
}

<div id="parent">
  <div class="child" id="c1" style="background-color:rgb(255, 0, 0);"></div>
  <div class="child" id="c2" style="background-color:rgb(0, 215, 0);"></div>
  <div class="child" id="c3" style="background-color:rgb(0, 0, 255);"></div>
</div>
<div id="gradient"></div>
<button type="button" id="tryIt">Try it</button>

Answer 2

您需要删除,变量末尾的gradientcolor尾号，并在for循环之外的gradient元素上设置背景]]

function myFunction() {

  let gradientcolor = "";
  let childcolor = document.getElementById("parent").children;

  for (let i = 0; i < childcolor.length; i++) {
    gradientcolor += childcolor[i].style.backgroundColor + ', ';
  }

  document.getElementById("gradient").style.background = "linear-gradient(to right, " + gradientcolor.slice(0, -2) + " )"
}
<div id="parent">
  <div id="child" style="width:50px;height:50px;background-color:rgb(255, 0, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 215, 0);"></div>
  <div id="child" style="width:50px;height:50px;background-color:rgb(0, 0, 255);"></div>
</div>
<div id="gradient" style="width:150px;height:50px;background-color:#f2f2f2"></div>

<button onclick="myFunction()">Try it</button>