如何用JavaScript检测Sold/Offer文本并修改对应元素背景色？

嘿，这事儿好办！我给你两种实用的实现方式，都是原生JavaScript写的，不用依赖任何框架，你可以根据需求选：

方法一：直接通过JS设置行内样式 #

先看你的原始HTML结构：

<div class='post-inner'> 
  <span class='item_status'>Sold</span> 
  <span class='item_status'>Offer</span> 
</div>

接下来用JS获取所有状态元素，逐个判断文本内容并设置背景色：

// 拿到所有带.item_status类的元素
const statusElements = document.querySelectorAll('.item_status');

// 遍历每个元素做处理
statusElements.forEach(element => {
  // 先把文本前后的空格去掉，避免因为空格导致判断出错
  const statusText = element.textContent.trim();
  
  if (statusText === 'Sold') {
    element.style.backgroundColor = 'red';
    // 可选：给文字加白色，让红色背景上的文字更清晰
    element.style.color = 'white';
  } else if (statusText === 'Offer') {
    element.style.backgroundColor = 'blue';
    element.style.color = 'white';
  }
});

方法二：用CSS类控制样式（更推荐） #

这种方式把样式和逻辑分开，更符合前端开发的最佳实践，后续改样式也不用动JS代码：

首先在CSS里定义好对应的样式类：

/* Sold状态的样式 */
.status-sold {
  background-color: red;
  color: white;
  padding: 2px 6px; /* 可选：加内边距让样式更好看 */
  border-radius: 3px;
}

/* Offer状态的样式 */
.status-offer {
  background-color: blue;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
}

然后用JS给元素添加对应的类：

const statusElements = document.querySelectorAll('.item_status');

statusElements.forEach(element => {
  const statusText = element.textContent.trim();
  
  switch(statusText) {
    case 'Sold':
      element.classList.add('status-sold');
      break;
    case 'Offer':
      element.classList.add('status-offer');
      break;
    // 可选：处理其他未知状态
    default:
      // 比如设置默认样式或者什么都不做
      break;
  }
});

小提示 #

• 一定要用trim()处理文本！如果你的HTML里不小心给文本加了前后空格（比如<span class='item_status'> Sold </span>），不加trim的话判断会失败，这点很重要。
• 如果这些状态元素是动态加载的（比如通过AJAX从后台获取后添加到页面），记得要在元素完全加载到DOM之后再执行这段JS代码，不然会找不到元素哦。

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