Streamlabs使用自定义JS实现聊天消息边框左右随机显示的问题

你遇到的问题由两个核心错误导致，和{messageId}模板变量无关：

• CSS属性拼写错误：你写的borderight是无效属性名，正确的右侧边框属性为borderRight
• DOM获取时机错误：onEventReceived是消息接收事件，触发时Streamlabs还未完成消息DOM的渲染插入，直接调用getElementById会拿到空值，代码无法执行
• 补充说明：模板里的{messageId}是Streamlabs预设的模板插值变量，渲染时会自动替换为真实的消息ID，这块写法没有问题不需要调整

修正后的完整代码 #

JS代码 #

document.addEventListener('onEventReceived', function(obj) {
  // 增加短延迟等待DOM渲染完成，时长可根据实际运行效果微调
  setTimeout(() => {
    const msgId = obj.detail.messageId;
    const msgEl = document.getElementById(msgId);
    // 容错判断，避免元素不存在时报错
    if (!msgEl) return;

    const number = getRandomInt(1, 10);
    if (isEven(number)) {
      // 修正拼写错误的属性名
      msgEl.style.borderRight = "7px solid";
    } else {
      msgEl.style.borderLeft = "7px solid";
    }
  }, 100);
});

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function isEven(value) {
  return value % 2 === 0;
}

HTML代码 #

保持你现有的模板代码即可，无需修改

可选优化建议 #

如果固定延迟的稳定性不符合预期，可以改用MutationObserver监听#log容器的DOM变化，新消息插入时自动触发样式修改，适配性更强；也可以把边框样式提前定义为CSS类，通过切换类名的方式修改样式，后续调整参数更方便。

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