передать цвет дива в другой див

Question

всем привет как можно реализовать, что бы див из большого квадрата наследовал цвет другого дива( квадрата )

     let cvadrs = document.querySelectorAll("div.melkiy");   //тутт я собрал с помощью квери селектор олл все дивы с классом melkiy и дал им общую переменную, через которую обращаюсь сразу ко всем

     for (cvadr of cvadrs) {
        cvadr.onmousedown = function(e) {
            cvadr = e.currentTarget
            cvadr.style.position = "absolute";
            cvadr.style.zIndex = 100;
            document.addEventListener("mousemove", moveElement);
        document.onmouseup = function() {
            cvadr.style.zIndex = 1;
            document.removeEventListener("mousemove", moveElement)
            // тут указываю координаты квадратов ( 4 границы, верх, лево, право, низ)
            let cvadr_top = cvadr.getBoundingClientRect().top;          
            let cvadr_left = cvadr.getBoundingClientRect().left;
            let cvadr_right = cvadr.getBoundingClientRect().right;
            // тут прописываю границы большого квадарата
            let bolshoy_top = bolshoy.getBoundingClientRect().top;          
            let bolshoy_left = bolshoy.getBoundingClientRect().left;
            let bolshoy_right = bolshoy.getBoundingClientRect().right;
            let bolshoy_bottom = bolshoy.getBoundingClientRect().bottom;

            if (cvadr_top > bolshoy_top &&
            cvadr_left > bolshoy_left && 
            cvadr_right < bolshoy_right &&
            cvadr_top < bolshoy_bottom) {
                cvadr.hidden = true;
        }
    }

            function moveElement(event) {
            let x = event.clientX - 100;
            let y = event.clientY - 100;
          
            cvadr.style.top = y + "px";
            cvadr.style.left = x + "px";
            }
    }
}

       #perviy {
       
        width: 200px;
        height: 200px;
        background-color: rgb(78, 21, 211);
       } 
       #vtotoy {
       
        width: 200px;
        height: 200px;
        top: 220px;
        background-color: rgb(226, 223, 30);
       } 
       #tretiy {
     
        width: 200px;
        height: 200px;
        top: 460px;
        background-color: rgb(16, 212, 114);
       } 

       #bolshoy {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 150px;
        left: 400px;
        background-color: rgb(214, 228, 221);
       }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div class="melkiy" id="perviy"></div>
    <div class="melkiy" id="vtotoy"></div>
    <div class="melkiy" id="tretiy"></div>
    <div id="bolshoy"></div>
</body>
</html>

Answer 1

Нужно в момент захвата маленького квадрата получать цвет его фона, а в момент отпускания передавать этот цвет фону большого квадрата. В Ваш код я добавил 2 строчки:

let cvadr_color = window.getComputedStyle(this).getPropertyValue('background-color'); //получение цвета фона маленького квадрата

bolshoy.style.backgroundColor = cvadr_color; //передача этого цвета фону большого квадрата

let cvadrs = document.querySelectorAll("div.melkiy");   //тутт я собрал с помощью квери селектор олл все дивы с классом melkiy и дал им общую переменную, через которую обращаюсь сразу ко всем

     for (cvadr of cvadrs) {
        cvadr.onmousedown = function(e) {
        
            let cvadr_color = window.getComputedStyle(this).getPropertyValue('background-color');
          
            cvadr = e.currentTarget
            cvadr.style.position = "absolute";
            cvadr.style.zIndex = 100;
            document.addEventListener("mousemove", moveElement);
        document.onmouseup = function() {
            cvadr.style.zIndex = 1;
            document.removeEventListener("mousemove", moveElement)
            // тут указываю координаты квадратов ( 4 границы, верх, лево, право, низ)
            let cvadr_top = cvadr.getBoundingClientRect().top;          
            let cvadr_left = cvadr.getBoundingClientRect().left;
            let cvadr_right = cvadr.getBoundingClientRect().right;
            // тут прописываю границы большого квадарата
            let bolshoy_top = bolshoy.getBoundingClientRect().top;          
            let bolshoy_left = bolshoy.getBoundingClientRect().left;
            let bolshoy_right = bolshoy.getBoundingClientRect().right;
            let bolshoy_bottom = bolshoy.getBoundingClientRect().bottom;

            if (cvadr_top > bolshoy_top &&
            cvadr_left > bolshoy_left && 
            cvadr_right < bolshoy_right &&
            cvadr_top < bolshoy_bottom) {
                cvadr.hidden = true;
                
                bolshoy.style.backgroundColor = cvadr_color;
        }
    }

            function moveElement(event) {
            let x = event.clientX - 100;
            let y = event.clientY - 100;
          
            cvadr.style.top = y + "px";
            cvadr.style.left = x + "px";
            }
    }
}

#perviy {
  width: 200px;
  height: 200px;
  background-color: rgb(78, 21, 211);
} 
#vtotoy {
  width: 200px;
  height: 200px;
  top: 220px;
  background-color: rgb(226, 223, 30);
} 
#tretiy {
  width: 200px;
  height: 200px;
  top: 460px;
  background-color: rgb(16, 212, 114);
} 
#bolshoy {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 150px;
  left: 400px;
  background-color: rgb(214, 228, 221);
}

<div class="melkiy" id="perviy"></div>
<div class="melkiy" id="vtotoy"></div>
<div class="melkiy" id="tretiy"></div>
<div id="bolshoy"></div>

БЛОГ НА HUSL

передать цвет дива в другой див

Ответы (1 шт):