通过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 = ' 比特币：链内去中心化指数    ···'}

其中，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 = ' 比特币：链内去中心化指数    ···'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("已移除")}}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！