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

Question

我正在开发一个元素，该元素将使用两个不同的 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-->

这两个div在CSS中的背景色

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

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

有人可以为此建议我使用 Javascript 吗？ 非常感谢。

Answer 1

这是一个解决方案， 希望对您有所帮助!

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>

CSS:

.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;
}

JS:

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);