如何用JavaScript遍历类元素，将innerHTML作为URL匹配背景图地址？

问题根因 #

1. element.style 仅能读取元素的行内样式属性，你初始设置的背景图是写在CSS样式表中的，通过ab.style.backgroundImage读取到的是空值，永远无法匹配成功。
2. 即便后续通过JS设置了行内背景图，不同浏览器返回backgroundImage的字符串格式不统一，可能返回url("xxx")、url('xxx')或者url(xxx)三种格式，直接做字符串全等判断大概率匹配失败。

解决思路 #

• 改用getComputedStyleAPI读取元素实际生效的样式属性
• 用正则提取url()包裹的实际链接，自动剔除引号、空格等格式差异后再做对比
• 补充数组边界判断，避免索引超出范围报错

修正后完整代码 #

JavaScript

function scrolle() {
  const aa = document.getElementsByClassName("rhuman");
  const ab = document.getElementById("picturea");
  const ac = document.getElementById("counter");
  // 提取当前生效背景图的纯链接
  const currentBg = getComputedStyle(ab).backgroundImage;
  const currentUrl = currentBg.match(/url\(["']?([^"']*)["']?\)/)[1];

  for (let i = 0; i < aa.length; i++) {
    const targetUrl = aa[i].innerHTML.trim();
    if (currentUrl === targetUrl) {
      // 取模实现循环切换，不会出现索引越界
      const nextIndex = (i + 1) % aa.length;
      ab.style.backgroundImage = `url('${aa[nextIndex].innerHTML.trim()}')`;
      ac.innerHTML = `${nextIndex + 1}/${aa.length}`;
      return;
    }
  }
}

CSS

#picturea {
  width: 100px;
  height: 100px;
  background-image: url('https://i.imgur.com/8vXm05P.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

HTML

<button onclick="scrolle()">Click here</button>
<div id="counter">1/4</div>
<div id="picturea"></div>
<li class="rhuman">https://i.imgur.com/8vXm05P.png</li>
<li class="rhuman">https://i.imgur.com/ejOe0QT.png</li>
<li class="rhuman">https://i.imgur.com/ur5R5nY.png</li>
<li class="rhuman">https://i.imgur.com/d2TXLTC.png</li>

内容的提问来源于stack exchange，提问作者Rage A. Shadey