通过使用onclick事件javascript从两个div获取背景色来创建线性渐变

我正在进行一个项目，该项目将使用两个不同的onClick事件从两个不同的div获取背景色。我的div具有十六进制背景色值。我想得到它们并将它们连接为线性渐变，将它们应用于父div，还想将相同的代码转换为rgb。 这是我的HTML、CSS和Js

<div class="color ForeignCrismon" onClick="GetColorOne(event)"></div> <!--First Color Stop-->
<div class="color BrewedBrown" onClick="GetColorTwo(event)"></div> <!--Second Color Stop-->

有人能推荐我使用Javascript吗？ 非常感谢。

这里有一个解决方案， 希望它能帮助你

HTML:

<div class="color ForeignCrismon" onClick="GetColorOne(event)"></div>
<!--First Color Stop-->
<div class="color BrewedBrown" onClick="GetColorTwo(event)"></div>
<!--Second Color Stop-->
<div id="ParentBox"></div>

.color {
width: 100px; 
height: 100px;
margin: 30px;
}

.ForeignCrismon {background-color:#C91F37;} /* Div 1 color */

.BrewedBrown {background-color:#E68364;}  /* Div 2 color */

#ParentBox {
width: 500px;
height: 200px;
background: linear-gradient(red, blue);
margin: 30px;
}

var FirstColor, SecondColor;

function GetColorOne(e) {

    var ColorBox = e.target;
    style = window.getComputedStyle(ColorBox),
    BgColor = style.getPropertyValue('background-color');

    FirstColor = BgColor;

}

function GetColorTwo(e) {

    var ColorBox = e.target;
    style = window.getComputedStyle(ColorBox),
    BgColor = style.getPropertyValue('background-color');

    SecondColor = BgColor;

}

function ApplyGradient() {

    if(FirstColor && SecondColor) {

        var parent = document.getElementById("ParentBox");

        parent.style.background = 'linear-gradient(' + FirstColor + ',' + SecondColor + ')';

    }

}

document.addEventListener("click", ApplyGradient);

JS:

<div class="color ForeignCrismon" onClick="GetColorOne(event)"></div>
<!--First Color Stop-->
<div class="color BrewedBrown" onClick="GetColorTwo(event)"></div>
<!--Second Color Stop-->
<div id="ParentBox"></div>

.color {
width: 100px; 
height: 100px;
margin: 30px;
}

.ForeignCrismon {background-color:#C91F37;} /* Div 1 color */

.BrewedBrown {background-color:#E68364;}  /* Div 2 color */

#ParentBox {
width: 500px;
height: 200px;
background: linear-gradient(red, blue);
margin: 30px;
}

var FirstColor, SecondColor;

function GetColorOne(e) {

    var ColorBox = e.target;
    style = window.getComputedStyle(ColorBox),
    BgColor = style.getPropertyValue('background-color');

    FirstColor = BgColor;

}

function GetColorTwo(e) {

    var ColorBox = e.target;
    style = window.getComputedStyle(ColorBox),
    BgColor = style.getPropertyValue('background-color');

    SecondColor = BgColor;

}

function ApplyGradient() {

    if(FirstColor && SecondColor) {

        var parent = document.getElementById("ParentBox");

        parent.style.background = 'linear-gradient(' + FirstColor + ',' + SecondColor + ')';

    }

}

document.addEventListener("click", ApplyGradient);

---

你试过写Javascript吗？@Harry是的，我试过<代码>代码window.onload=function（）{function GetColorOne（e）{var ColorOneCode=e.target.style.backgroundColor；function getcolortower（e）{var colortowcode=e.target.style.backgroundColor；}警报（document.write（“颜色一号代码为“+ColorOneCode+”颜色二号代码为“+colortowcode））；}

code

Ok。但是，当只进行第一次单击时，背景应该是什么？另外，如果按相反顺序单击，会发生什么情况（即，在第一次单击之前单击第二次

div

）？如果两个div都被点击，颜色应该改变…我的意思是只应该生成线性渐变…如果反转，颜色应该按照两个div的点击顺序生成。。。