如何使用document.getElementsByClassName修改ngIf控制的两张图片src

开发者阿泽

2026-9-25

问题核心原因

AngularJS的ngIf指令会在表达式结果为false时直接将对应元素从DOM树中移除，因此页面加载时你只能获取到当前符合渲染条件的图标，另一张未被渲染的图标不存在于DOM中，无法直接通过DOM选择器获取修改。

可行解决方案

方案1：CSS属性选择器替换（最简便）

直接通过CSS的属性选择器匹配不同ngIf条件的图标，只要元素被渲染就会自动应用样式替换图片，无需处理DOM渲染时机：

/* 替换ng-if="fun.__inViewlist"的图标 */
img.viewlist_button_icon[ng-if="fun.__inViewlist"] {
  content: url(https://替换为你的第一个图标地址);
}

/* 替换ng-if="!fun.__inViewlist"的图标 */
img.viewlist_button_icon[ng-if="!fun.__inViewlist"] {
  content: url(https://替换为你的第二个图标地址);
}

方案2：JS监听DOM动态修改

如果必须通过JS实现，可以用MutationObserver监听DOM变化，每当有新的图标元素被渲染到页面时自动执行替换逻辑：

// 图标替换逻辑
function updateIconSrc() {
  const allIcons = document.querySelectorAll('.viewlist_button_icon');
  allIcons.forEach(icon => {
    const ngIfCondition = icon.getAttribute('ng-if');
    if (ngIfCondition === 'fun.__inViewlist') {
      icon.src = 'https://替换为你的第一个图标地址';
    } else if (ngIfCondition === '!fun.__inViewlist') {
      icon.src = 'https://替换为你的第二个图标地址';
    }
  })
}

// 先替换页面上已存在的图标
updateIconSrc();

// 监听DOM变化，后续新渲染的图标自动替换
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.addedNodes.length > 0) {
      updateIconSrc();
    }
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});