создание линейного градиента путем получения цветов фона из двух дивов с помощью события onclick javascript

Question

создание линейного градиента путем получения цветов фона из двух дивов с помощью события onclick javascript

Я работаю над проектом, который будет получать цвет фона от двух разных дивов, используя два разных onClick events.My дивы имеют шестнадцатеричные значения цвета фона. Я хочу получить их и объединить в виде линейного градиента, применить их к родительскому 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-->

Цвет фона этих двух дивов в Css

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



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

Может ли кто-нибудь предложить мне Javascript для этого?
Большое спасибо.

693 1

javascript css3 html5

1 ответ:

Comments

Ничего не найдено.

Aizaz Shahid · Accepted Answer · 2016-06-12 22:03:36

Вот решение, надеюсь, это поможет вам!

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