通过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("已移除")}}}}

通过document.createElement 后，某些设置无反应相关推荐

mercury路由器重置后服务器无响应,MERCURY无线路由器重置后重新设置不能 – 手机爱问...
2018-04-03 MERCURY无线路由器重置后重新设置不能使用了...求解我家是电信的小区光纤,每个房间都有端口的那种网络布线,猫在大厅,无线路由器在主卧,昨晚笔记本突然无线不能用了,我就断开 ...
用js的document.write输出的广告无阻塞加载的方法（转）
一.广告代码分析很多第三方地广告系统都是使用document.write来加载广告,如下面地一个javascript地广告链接. 代码如下: <script type=text/javascr ...
用js的document write输出的广告无阻塞加载的方法
一.广告代码分析很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接. 代码如下: <script type="text/j ...
js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...
在一个Web页面中,需要弹出一个提示信息显示给用户.基于这个需求,要使用document.createElement()创建一个DOM节点.创建完节点后,还要使用appendChild()或inser ...
document.getElementsByName , document.getElementsByTagName ,document.createElement
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节 ...
vue createElement后删除这个元素 the node to be removed is not a child of this node
项目场景: 描述:做的项目需要生成一行script标签后使用完再删除这个标签,以保持文件的简洁例如:再一个html里的生产一个script标签,使用完成后再删除这个script标签问题描述: 提示 ...
uefi装完系统后无法引导_系统安装完后再设置uefi启动 - 卡饭网
Windows8系统安装完后无法上网的解决办法 Windows8系统安装完后无法上网的解决办法现在有不少用户反映安装Win8后无法联网的问题,这个问题很大程度是网卡驱动导致的,那该怎么办呢,只能是重 ...
调用startActivityForResult后，onActivityResult无响应的题目
人员都知道,可以经由过程应用 startActivityForResult() 和 onActivityResult() 办法来传递或接管参数. 然而在"轻听"项目中,还没比及被调 ...
document.createElement
document.createElement()的用法 document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合 ...

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

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

问题描述

发现

后续更改

通过document.createElement 后，某些设置无反应相关推荐

最新文章

热门文章