js给生成的div取色换色

想要的结果：自动创建五个div，并给每个div后面自动创建一个取色按钮，点击按钮进行取色之后，div背景变成相应的颜色。

代码与解释如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取色与换色</title>
</head>
<body>
    <script>
        //给接下来要生成的div与其颜色都设置一个空数组存放
        var boxArr = [];
        var inputArr = [];

        // 用for循环创建5个div与颜色按钮
        for(var i = 0;i<5;i++){

            // 创建div标签
            var box = document.createElement('div');
            document.body.appendChild(box);

            // 给box设置属性
            box.style.cssText = "width:100px;height:100px;border:1px solid;"

            // 把创建的box放在数组里
            boxArr.push(box);

            // 创建一个input标签
            var inputEle = document.createElement('input');
            // 把input标签的类型设置为color，就是一个取色器
            inputEle.type = "color";
            document.body.appendChild(inputEle);
            inputArr.push(inputEle);
        }


        // 遍历div数组的每一个div
        for(var i = 0;i<boxArr.length;i++){

            // 把div数组的下标对应到input数组的下标
            inputArr[i].se = i;
            // 当点击某个取色按钮选取颜色之后，与之相对应的div背景颜色变成你选取的颜色
            inputArr[i].onchange = function(){
                boxArr[this.se].style.background = this.value;
            }
        }

    </script>
</body>

 

posted @ 2020-10-12 14:25  仔几  阅读(245)  评论(0)    收藏  举报