js 修改动态节点的属性、类名、图片的路径

使用原生js 动态修改 动态节点的属性、类名或图片的路径

动态节点通过index动态命名id

react

<div
      className="viso-name"
      id={`viso-name${index}`}
       >
       <img id={'img'${index}} src="./imges.1.png" alt=""/>
        {info.name}
    </div>

vue

<div
      className="viso-name"
      :id="'img' + index" 
       >
       <img :id="'img' + index" src="./imges.1.png" alt=""/>
        {info.name}
    </div>

修改节点的属性、类名

增加类名
document.getElementById(viso-name${index}).classList.add(‘endN’);
删除类名
document.getElementById(viso-name${index}).classList.remove(‘endN’);

document.getElementById(viso-name${index}).style.color = “black”;

document.querySelector(viso-name${index}).style.display = “block”;

修改节点的img路径

document.getElementById(viso-name${index}).src = “xxxx.jpg”;