我需要从“父”元素中获取“子”元素的颜色,并在它们之间进行线性渐变,然后将其插入“渐变”元素中。在警报中,我的样式背景颜色重复了几次。我该如何解决?
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>
是背景,不是背景图像
此外,您还需要将作业移到循环外
如果使用数组并推入,也不会出现怪异的逗号
此外,尽管您不使用它们,但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>
您需要删除,
变量末尾的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>