如何根据 AJAX 响应中的布尔值动态添加 CSS 类实现消息左右对齐

本文讲解如何在 ajax 请求返回的聊天消息中，依据 `bot` 布尔字段动态为消息容器添加 `right` 或默认类，从而通过 css 实现用户消息左对齐、机器人消息右对齐的聊天界面布局。

要在聊天应用中区分用户消息与机器人回复，并实现视觉上的左右分离（如用户消息靠左、Bot 消息靠右），关键在于将后端返回的布尔标识 model.bot 映射为前端 DOM 元素的 CSS 类名，再配合 CSS 的 Flex 布局完成定位。

✅ 核心实现思路

在 JavaScript 模板字符串拼接阶段，根据 model.bot 的真假值，动态注入额外的 CSS 类（如 'right'），而非硬编码固定类名。例如：

let botclass = model.bot ? 'right' : '';
const temp = `
  <div class='chat ${botclass}'>
    <span class='time-left'>${model.datetime}</span>
    <b>${model.user_id}</b>
    <p>${model.room}</p>
    ${imgMarkup(model)}
  </div>`;

该写法利用模板字符串的 ${} 插值能力，使 class 属性可变：当 model.bot === true 时，生成 <div class='chat right'>；否则为 <div class='chat'>。

? 补充 CSS 支持

仅添加类名还不够，需配合 CSS 定义 .chat.right 的布局行为。推荐使用 margin-left: auto 实现右对齐（保持 flex 容器一致性）：

ColorMagic

AI调色板生成工具

下载

立即学习“前端免费学习笔记（深入）”；

.chat {
  border-top: 1px solid #CCC;
  margin-top: 1em;
  border-radius: 2px;
  color: white;
  padding: 1em;
  display: flex;
  flex-direction: column;
  max-width: 80%;
  background: #4a6fa5;
}

.chat.right {
  margin-left: auto;
  background: #2e5a3e;
}

? 提示：.chat.right 中 margin-left: auto 会将元素推至父容器右侧（前提是父容器为 display: flex 且子项未设 flex-grow）。若 .chatbox（即 #display）尚未设置为 flex 容器，建议补充：.chatbox { display: flex; flex-direction: column; gap: 0.5em; }

⚠️ 注意事项

• 避免 XSS 风险：当前代码直接插入 model.user_id 和 model.room，若这些字段含用户可控内容（如昵称、消息正文），务必进行 HTML 转义（可用 textContent 替代 innerHTML，或引入 DOMPurify 库）。
• 性能优化建议：setInterval 每秒轮询可能造成服务端压力；生产环境推荐改用 Server-Sent Events (SSE) 或 WebSocket。
• 响应式健壮性：确保 response.models_to_return 始终为数组，可在循环前增加防护：

  const messages = Array.isArray(response.models_to_return) 
    ? response.models_to_return 
    : [];
  for (let model of messages) { /* ... */ }

通过以上改造，即可优雅、可维护地实现基于数据状态的 UI 样式分支，让聊天界面语义清晰、结构灵活。