DOM节点样式做个取色器

<div id="color-box">
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
            <div>点击更换颜色</div>
      </div>
      <div id="show-box">
            点击上面不同的div，这里显示对应的颜色
      </div>
      <script>
            // 1
            var colorBox = document.querySelector('#color-box');
            colorBox.style.width = '660px';
            colorBox.style.height = 'auto';
            colorBox.style.border = '1px solid red';
            // 2
            var divs = colorBox.children;
            for (var i = 0; i < divs.length; i++) {
                  divs[i].style.width = '100px';
                  divs[i].style.height = '100px';
                  divs[i].style.float = 'left';
                  divs[i].style.margin = '5px';
                  divs[i].style.fontSize = '16px';
                  var r = Math.floor(Math.random() * 255);
                  var g = Math.floor(Math.random() * 255);
                  var b = Math.floor(Math.random() * 255);
                  var color = 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
                  divs[i].style.backgroundColor =color;
            // 加事件
            divs[i].onclick=function(){
                  // 取色
                  var bg=window.getComputedStyle(this,null).backgroundColor;
                  // 赋值
                  showBox.style.backgroundColor=bg;
                  showBox.innerHTML=bg;
            }
            }
            var showBox = document.getElementById('show-box');
            showBox.style.width = '300px';
            showBox.style.height = '300px';
            showBox.style.border = '1px solid red';
      </script>