如何通过JavaScript为指定HTML元素添加CSS类EXTRA

嗨，我来帮你搞定这个需求！要给对应"A:"和"B:"的那两组元素添加extra类，咱们可以按清晰的逻辑一步步实现：

首先得找到页面上所有的.info-list-item元素，逐个检查每个元素里的.info-label文本内容，判断是不是"A:"或者"B:"。如果符合条件，就给这个元素下的.info-label和.info-val都追加extra类。

具体代码实现 #

// 获取页面上所有带info-list-item类的元素
const listItems = document.querySelectorAll('.info-list-item');

// 遍历每个列表项
listItems.forEach(item => {
  // 获取当前项里的标签元素
  const labelElement = item.querySelector('.info-label');
  // 去除文本首尾空格后判断是否为目标标签
  const labelText = labelElement.textContent.trim();
  if (labelText === 'A:' || labelText === 'B:') {
    // 给标签和对应的值元素添加extra类
    labelElement.classList.add('extra');
    item.querySelector('.info-val').classList.add('extra');
  }
});

代码逻辑说明 #

• document.querySelectorAll('.info-list-item')：选中页面上所有符合类名的元素，返回一个可遍历的节点列表。
• textContent.trim()：去除文本首尾的空格，避免因为意外的空格导致匹配失败（比如标签文本前后有空格的情况）。
• classList.add('extra')：这是给元素添加类的标准安全方法，只会追加新类，不会覆盖原有类，比直接修改className更稳妥。

如果你的HTML结构固定，也可以用更直接的写法，直接定位目标标签再处理对应的兄弟元素：

// 选中所有info-label元素
const targetLabels = document.querySelectorAll('.info-label');
targetLabels.forEach(label => {
  const labelText = label.textContent.trim();
  if (labelText === 'A:' || labelText === 'B:') {
    label.classList.add('extra');
    // 找到相邻的info-val元素并添加类
    label.nextElementSibling.classList.add('extra');
  }
});

两种方法都能达成目标，你可以根据自己的实际场景选择~

备注：内容来源于stack exchange，提问作者DjTribunus