通过document.createElement 后，某些设置无反应

通过document.createElement 后，设置相应的属性类别，发现类别无反应

问题描述

首先，我需要通过一个按钮创建新的元素，同时新的元素的格式需要设置，大致代码如下

 var btn2 = document.getElementById('btn2')
    var div = document.getElementById('testDiv')
    btn2.addEventListener('click', function () {
        var btn11 = document.createElement("button");
        div.appendChild(btn11)
        btn11.className = "btn btn-light myMoveStyleM"// myMoveStyleM是我自己设置的类别，后续通过document.querySelectorAll获取并进行相应操作
        btn11.style.backgroundColor = ' rgba(231,204,204,0.39)'
        btn11.innerHTML = '<img src="static/image/比特币.png" alt="" style="height: 20px;margin-bottom: 1%"> <strong>比特币</strong>：链内去中心化指数  <div class="btn myMoveStyleMBtn"  style="border: rgba(231,204,204,0.39)  1px solid;height: 80%;position:relative">  <strong style="    position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%);">···</strong></div>'
        }

其中，myMoveStyleM代码设置为：

   //选择指标的颜色变化情况,  …
    var moveStyleMetric = document.querySelectorAll('.myMoveStyleM')
    for (let i = 0; i < moveStyleMetric.length; i++) {
        moveStyleMetric[i].onmousemove = function () {
            moveStyleMetric[i].style.backgroundColor = 'rgba(182,179,179,0.6)'
            moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.border = 'rgba(93,91,91,0.51) 1px solid'
            moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.backgroundColor = 'rgba(245,225,225,0.6)'
        }
        moveStyleMetric[i].onmouseleave = function () {
            moveStyleMetric[i].style.backgroundColor = 'rgba(224,220,220,0.79)'
            moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.border = 'transparent'
            moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.backgroundColor = 'transparent'
        }
    }

但是在创建完成之后，发现鼠标的移动并不能引起相应的变化。

发现

因为我在点击button生成元素之前，我的第二段代码已经跑完了，在我设置元素后，便不再进行设置，

后续更改

把第二段代码包装成函数，在新建元素且设置完后，运行一边函数。
代码如下：

    var btn2 = document.getElementById('btn2')
    var div = document.getElementById('testDiv')
    btn2.addEventListener('click', function () {
        var btn11 = document.createElement("button");
        div.appendChild(btn11)
        btn11.className = "btn btn-light myMoveStyleM"
        btn11.style.backgroundColor = ' rgba(231,204,204,0.39)'
        btn11.innerHTML = '<img src="static/image/比特币.png" alt="" style="height: 20px;margin-bottom: 1%"> <strong>比特币</strong>：链内去中心化指数  <div class="btn myMoveStyleMBtn"  style="border: rgba(231,204,204,0.39)  1px solid;height: 80%;position:relative">  <strong style="    position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%);">···</strong></div>'
        f()
    })

    function f() {
        //选择指标的颜色变化情况,  …
        var moveStyleMetric = document.querySelectorAll('.myMoveStyleM')
        // setInterval(function (){  console.log(change111) },1000);
        // var moveStyleMetricBtn = moveStyleMetric.querySelector('.myMoveStyleMBtn')
        var change111 = document.getElementById('1111')
        // console.log(change111)
        // setInterval(function (){  console.log(change111) },1000);

        for (let i = 0; i < moveStyleMetric.length; i++) {

            moveStyleMetric[i].onmousemove = function () {
                console.log('11111111111111111')
                console.log(moveStyleMetric[i])
                moveStyleMetric[i].style.backgroundColor = 'rgba(182,179,179,0.6)'
                moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.border = 'rgba(93,91,91,0.51) 1px solid'
                moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.backgroundColor = 'rgba(245,225,225,0.6)'

                // moveStyleMetric[i].getElementById('q').style.border='white 1px solid'
            }
            moveStyleMetric[i].onmouseleave = function () {
                moveStyleMetric[i].style.backgroundColor = 'rgba(224,220,220,0.79)'
                moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.border = 'transparent'
                moveStyleMetric[i].querySelector('.myMoveStyleMBtn').style.backgroundColor = 'transparent'

                // moveStyleMetric[i].getElementById('q').style.border='black 100px solid'

            }
        }

        var moveStyleMetricBtn = document.querySelectorAll('.myMoveStyleMBtn')
        var b = document.querySelectorAll('button')
        setInterval(function () {
            console.log(b)
        }, 1000);
        var metricOper = document.getElementById('metricOper')
        var remove = document.getElementById('remove')
        var add = document.getElementById('add')
        var dialog = document.getElementById('dialog')
        var exchange = document.getElementById('exchange')
        var flar = []


        for (let i = 0; i < moveStyleMetricBtn.length; i++) {
            flar.push(1)
            moveStyleMetricBtn[i].onclick = function (e) {
                if (flar[i] == 1) {
                    //如果之前有了，那就先把之前的删掉
                    for (let j = 0; j < flar.length; j++) {
                        if (i != j && flar[j] == 0) {
                            metricOper.style.display = 'none'
                            flar[j] = 1
                        }
                    }

                    //设置新的选择框的位置
                    var lix = (this.offsetLeft - 110 + this.offsetWidth) + 'px';
                    var liy = (this.offsetTop + this.offsetHeight + 4) + 'px';
                    metricOper.style.display = 'block'
                    metricOper.style.marginLeft = lix;
                    metricOper.style.marginTop = liy;
                    metricOper.onmouseleave = function () {
                        metricOper.style.display = 'none'
                    }
                    flar[i] = 0
                } else {
                    metricOper.style.display = 'none'
                    flar[i] = 1
                }
                console.log(flar)

                //    点击移除或者更改后的事件操作
                remove.onclick = function () {
                    moveStyleMetricBtn[i].parentNode.style.display = 'none'
                    metricOper.style.display = 'none'
                    alert("已移除")

                }

            }
        }
    }