如何通过JS/JQuery修改动态加载模态框中指定按钮的字体大小？

问题根源 #

你的代码失效有两个核心原因：

1. 模态框按钮是点击链接后动态生成的，页面初始加载时无法获取到目标元素；
2. 原代码存在语法错误：
   • 循环条件错误使用i <= targetButton.length，应为i < targetButton.length；
   • 判断逻辑用了赋值运算符=，而非比较运算符===；
   • 遍历按钮集合时未通过索引targetButton[i]获取单个元素。

可行解决方案 #

方案1：监听模态框触发链接的点击事件 #

找到打开模态框的链接（可通过文本、class等特征定位，示例假设链接class为open-modal），点击后延迟执行修改逻辑（适配动态加载的时间差）：

原生JavaScript版本

// 定位打开模态框的链接，根据实际情况调整选择器
const openModalLink = document.querySelector('a.open-modal');
if (openModalLink) {
  openModalLink.addEventListener('click', function() {
    // 延迟执行，确保模态框内容加载完成
    setTimeout(function() {
      const buttons = document.getElementById('acctContent').getElementsByClassName('modal-item');
      const targetText = 'some different text here';
      for (let i = 0; i < buttons.length; i++) {
        // 用trim()处理文本前后空格，避免匹配失败
        if (buttons[i].textContent.trim() === targetText) {
          buttons[i].style.fontSize = 'small';
          break; // 找到目标后终止循环，提升效率
        }
      }
    }, 100); // 延迟时间可根据实际加载速度调整
  });
}

jQuery版本（页面已引入jQuery时使用）

$('a.open-modal').on('click', function() {
  setTimeout(function() {
    $('.modal-item').each(function() {
      if ($(this).text().trim() === 'some different text here') {
        $(this).css('font-size', 'small');
        return false; // 终止遍历
      }
    });
  }, 100);
});

方案2：监听DOM变化（更可靠，无需依赖点击事件） #

使用MutationObserver监听模态框内容容器的变化，一旦目标按钮生成就自动修改样式：

原生JavaScript版本

const targetContainer = document.getElementById('acctContent');
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 检测到有新节点插入时执行逻辑
    if (mutation.addedNodes.length > 0) {
      const buttons = targetContainer.getElementsByClassName('modal-item');
      const targetText = 'some different text here';
      for (let i = 0; i < buttons.length; i++) {
        if (buttons[i].textContent.trim() === targetText) {
          buttons[i].style.fontSize = 'small';
          observer.disconnect(); // 修改完成后停止监听，避免重复执行
          break;
        }
      }
    }
  });
});

// 配置监听规则：监听子节点及后代节点的变化
observer.observe(targetContainer, { childList: true, subtree: true });

jQuery版本

$('#acctContent').on('DOMNodeInserted', function() {
  $('.modal-item').each(function() {
    if ($(this).text().trim() === 'some different text here') {
      $(this).css('font-size', 'small');
      $('#acctContent').off('DOMNodeInserted'); // 移除事件监听，避免重复触发
      return false;
    }
  });
});

方案3：纯CSS方案（文本内容固定时可用） #

利用CSS的:contains()选择器匹配指定文本的按钮（注意：部分浏览器对该选择器的支持为实验性，需测试兼容性）：

.modal-item:contains('some different text here') {
  font-size: small !important;
}

提示：如果按钮文本存在前后空格，建议配合JS方案处理，避免匹配失败。

内容的提问来源于stack exchange，提问作者gemArt