Actualmente estoy experimentando con Streamlabs y cómo personalizar el cuadro de chat de una transmisión. Soy bastante nuevo en HTML/CSS/Javascript y tengo problemas para ejecutar el código para modificar elementos de mi hoja CSS a través de la opción personalizada HTML/CSS/JS.

El objetivo del script JS que estoy tratando de escribir es simplemente aleatorizar la apariencia izquierda/derecha de un borde en el lado de mi div en cada mensaje.

El problema que encuentro es que no estoy seguro de cómo recuperar el div id="{messageId}" del DOM en mi secuencia de comandos JS. Ese valor es generado por streamlabs bajo esa sintaxis. Como puedes ver en el código con el que estoy intentando:

document.getElementById(obj['detail']['messageId']).style.borderight = "7px solid";

Pero parece que no funciona correctamente. Realmente no puedo encontrar ninguna documentación en el sitio web de Streamlabs o recursos sobre cómo recuperar cualquiera de los valores entre paréntesis del DOM, así que me preguntaba si eso era algo estándar y simplemente no sé cómo manipularlo o Solo me falta algo en mi script para que funcione.

 document.addEventListener('onEventReceived', function(obj) { var number = getRandomInt(1, 10); if (isEven(number)) { document.getElementById(obj['detail']['messageId']).style.borderight = "7px solid"; } else { document.getElementById(obj['detail']['messageId']).style.borderLeft = "7px solid"; }; }); function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } function isEven(value) { if (value % 2 == 0) return true; else return false; }

 <div id="log" class="sl__chat__layout"> </div> <script type="text/template" id="chatlist_item"> <div id="{messageId}" data-from="{from}" data-id="{messageId}"> <div class="wrapper" id="wrapper"> <span class="meta" style="color: {color}"> <span class="badges"></span> <span class="name">{from}</span> </span> <span class="message"> {message} </span> </div> </div> </script>