我该如何解决？ DOM javascript 渐变不起作用？

Question

我需要从 "parent" 元素中提取 "child" 元素的颜色并从中提取线性渐变，然后将其插入到 "gradient" 元素中。在警报中，我的风格 background-color 重复了几次。我该如何解决这个问题？

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

您需要删除 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>

Answer 2

是背景，不是背景图片
你有一个尾随逗号，这使得最后的陈述不起作用。
您需要将赋值移到循环外 - 虽然它仍然有效，但您现在将字符串赋值 3 次
此外，虽然您不使用它们，但 ID 需要是唯一的

如果你使用数组并推送，你也不会得到奇怪的逗号：

function myFunction() {
  var gradientcolor = []; // create an array
  var childcolor = document.getElementById("parent").children;
  var i;
  for (i = 0; i < childcolor.length; i++) {
    gradientcolor.push(childcolor[i].style.backgroundColor); // add to the array
  }
  // this join concatenates all array items with a comma - 
  // using comma is actually default so not even needed
  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>

没有内联脚本的 ES6 版本和 css。给 child div 一个 class of child 并将 ID 更改为唯一的

window.addEventListener("load", () => { // when the page loads
  document.getElementById("tryIt").addEventListener("click", () => { // when the specific button is clicked
    const gradientcolor = [...document.querySelectorAll("#parent .child")]   // creating an array from the HTMLElementCollection
      .map(child => getComputedStyle(child).getPropertyValue('background-color')); // grabbing the background-color from each
    document.getElementById("gradient").style.background = `linear-gradient(to right, ${gradientcolor.join(",")})`; // using template literal to wrap the string around the joined array
  })
})

.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"></div>
  <div class="child" id="c2"></div>
  <div class="child" id="c3"></div>
</div>
<div id="gradient"></div>
<button type="button" id="tryIt">Try it</button>

Answer 3

问题是您的代码在线性梯度函数争论中添加了额外的逗号，这使得该值无效。因此没有梯度。

尝试通过在js代码中放置断点来自行调试此类问题，将使您每天都成为更好的开发人员。

更改下面有效的代码。

function myFunction() {
  var gradientcolor = "";
  var childcolor = document.getElementById("parent").children;
  var i;
  for (i = 0; i < childcolor.length; i++) {
    gradientcolor += ', ' + childcolor[i].style.backgroundColor;
    document.getElementById("gradient").style.background = "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>

我该如何解决？ DOM javascript 渐变不起作用？

How do I fix? DOM javascript gradient not working?

javascript

dom

for-loop

parent-child

linear-gradients