如何根据文本内容修改class为pos的元素背景色？

你可以通过原生JavaScript来实现这个需求，步骤清晰易懂，下面是具体代码和说明：

方式1：用switch语句实现 #

// 等待页面DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有class为pos的元素
  const posElements = document.querySelectorAll('.pos');

  // 遍历每个元素
  posElements.forEach(element => {
    // 获取元素文本并去除首尾空格，避免空格干扰匹配
    const text = element.textContent.trim();

    // 根据文本内容设置对应背景色
    switch(text) {
      case 'verb':
        element.style.backgroundColor = 'green';
        break;
      case 'adverb':
        element.style.backgroundColor = 'purple';
        break;
      case 'adjective':
        element.style.backgroundColor = 'yellow';
        break;
      // 可选：处理其他未匹配的文本情况
      default:
        // 比如保持原有背景色，或者设置默认色
        break;
    }
  });
});

方式2：用if-else语句实现（新手更易理解） #

document.addEventListener('DOMContentLoaded', () => {
  const posElements = document.querySelectorAll('.pos');

  posElements.forEach(element => {
    const text = element.textContent.trim();

    if (text === 'verb') {
      element.style.backgroundColor = 'green';
    } else if (text === 'adverb') {
      element.style.backgroundColor = 'purple';
    } else if (text === 'adjective') {
      element.style.backgroundColor = 'yellow';
    }
  });
});

代码说明 #

• document.querySelectorAll('.pos')：获取页面上所有class为pos的元素，返回一个可遍历的元素集合。
• textContent.trim()：获取元素内部的文本内容，trim()方法会去掉文本首尾的空格，防止因为空格导致匹配失败。
• element.style.backgroundColor：直接修改元素的行内样式，设置背景颜色。
• DOMContentLoaded事件：确保代码在页面所有DOM元素加载完成后再执行，避免出现找不到元素的问题。

你只需要把这段代码放到HTML文件的</body>标签之前，或者放在单独的JS文件中引入即可。

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