Adding CSS styles to dynamically created HTML elements in JavaScript [duplicate]

I’m working on a Django project and I have an index.html file where I’ve connected a JavaScript file using the following script tag:

<script src="{% static 'assets/js/bubble.js' %}"></script>

In my JavaScript file, I have the following code:

console.log("Bubble");

// Get the speech bubble container
const speechBubbleContainer = document.querySelector('.speech-bubble-container');

// Function to create a speech bubble
function createSpeechBubble(message) {
  const speechBubble = document.createElement('div');
  speechBubble.style = `
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transition: opacity 2s;
  `;
  speechBubble.textContent = message;

  speechBubbleContainer.appendChild(speechBubble);

  // Remove the speech bubble after 2 seconds
  setTimeout(() => {
    speechBubble.style.opacity = 0;
    setTimeout(() => {
      speechBubble.remove();
    }, 2000);
  }, 2000);
}

// Create a speech bubble every 30 seconds
setInterval(() => {
  createSpeechBubble('Hi');
}, 3000);

And here’s my HTML code:

<div class="floating-button" style="..."> <!-- button styles -->
  <img src="..." alt="Button Image" style="..."> <!-- image styles -->
  <div class="speech-bubble-container" style="..."></div>
</div>

I want to add CSS styles to the dynamically created speech-bubble elements, but I’m not sure how to do it. I’ve tried adding the styles directly to the HTML elements, but it’s not working as expected.

Can someone help me figure out how to add the CSS styles to the dynamically created speech-bubble elements?

Edit: I’ve tried adding the styles directly to the JavaScript code like this:

speechBubble.style = `
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  animation: fadeOut 2s forwards;
`;

But I’m not sure if this is the best approach, and I’m still having issues with the animation. Any help would be appreciated!