使用JavaScript更改未来元素的字体大小

Question

我正在构建一个简单的聊天机器人。在从服务器收到的每条新消息中，都会创建一个新的HTML元素并将其推送到浏览器。因此，例如，消息1将是：

<div class="message-computer"><p>Hi, how are you?</p></div>

然后您（用户）键入/发送一条消息，显示为：

<div class="message-user"><p>I am good, thanks!</p></div>

等等等等。我创建了一个滑块来更改发送到聊天机器人/从聊天机器人发送的文本的大小。它现在有效，但它只编辑了现有的HTML元素。发送到服务器或从服务器发送的新消息仍为原始大小。

$('input').on('change', function() {

  var v = $(this).val();

  $('.message-computer p').css('font-size', v + 'em')

  $('.message-user p').css('font-size', v + 'em')

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" value="1" min="1" max="1.6" step=".1" id="slider" ondrag="changeSize()" />

如何更改字体大小适用于发送到浏览器的所有新元素？

谢谢