JavaScript实现背景变色

需求：页面显示4个颜色块儿，当鼠标进入某个颜色块儿时，页面背景色变成该颜色

<div class="color">
        <div id="box1" class="box" style=" background-color: pink;"></div>
        <div id="box2" class="box" style=" background-color: skyblue;"></div>
        <div id="box3" class="box" style=" background-color: lightgreen;"></div>
        <div id="box4" class="box" style=" background-color: plum;"></div>
</div>

<script>
    // 定义数组存储4个颜色块
    let color_arr = document.getElementsByClassName('box');
    // 循环遍历4个颜色块添加鼠标事件
    for(let i of color_arr){
       // 添加鼠标移入事件
       i.addEventListener('mouseover',function(){
           // 获取body控件
           document.querySelector('body').style.backgroundColor = this.style.backgroundColor;
       })
       // 添加鼠标移出事件
       i.addEventListener('mouseout',function(){
           // 获取body控件
           document.querySelector('body').style.backgroundColor = '#fff'
       })
    }
</script>