如何根据API返回的event.data值改变<div id="text">的文本颜色？

嘿，这事儿很容易搞定！既然你已经有能正常运行的JS代码接收服务器数据，只需要在处理event.data的环节加个简单的判断逻辑就行，直接看具体实现：

核心代码示例 #

首先提前拿到目标元素（建议把这步放在事件监听外面，避免每次都重复查询DOM，提升性能），然后根据返回的状态值设置文本颜色：

// 提前获取id为"text"的DOM元素
const statusTextEl = document.getElementById('text');

// 假设这是你接收服务器数据的事件处理函数（比如WebSocket的onmessage或者AJAX回调）
function handleServerResponse(event) {
  // 先去除返回值里可能的空格，避免判断失误
  const currentStatus = event.data.trim();

  // 根据状态设置文本颜色
  if (currentStatus === 'online') {
    statusTextEl.style.color = 'green';
  } else if (currentStatus === 'offline') {
    statusTextEl.style.color = 'red';
  } else {
    // 可选：处理未知状态的默认颜色，比如深灰色
    statusTextEl.style.color = '#333';
  }

  // 如果你需要把状态文本也显示在div里，加上这行
  statusTextEl.textContent = currentStatus;
}

小优化建议 #

• 统一管理颜色配置：把状态和颜色的对应关系抽成对象，后续新增状态时只需修改配置，不用动逻辑代码

  const STATUS_COLOR_MAP = {
    online: 'green',
    offline: 'red',
    // 以后加新状态直接在这里追加就行
    warning: 'orange'
  };
  // 简化后的颜色设置逻辑
  statusTextEl.style.color = STATUS_COLOR_MAP[currentStatus] || '#333';
  

• 增加元素存在校验：避免因DOM元素不存在导致控制台报错

  if (!statusTextEl) {
    console.error('页面中找不到id为"text"的div元素哦');
    return;
  }
  

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