使用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()" /> 

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

谢谢

Answer 1

不确定我是否很好理解您的问题，您的代码段不包含任何文本。

但是，当使用jQuery更新样式时，CSS语句会单独添加到每个元素的样式属性中（请看您的浏览器检查器）。 因此，新添加的元素在更改输入值之前不会修改其style属性，因此将从全局CSS规则继承。

我建议将字体样式应用于父母.message-computer和.message-user 。
如果不能，则将p元素包装到专用div中，然后将样式应用于div。

如果确实需要将其分别应用于每个元素，请运行$('input').trigger('change'); 在将新元素插入DOM之后。

Answer 2

您想要做的是将一个类添加到HTML的父标记中，然后具有适用于页面上所有喜欢元素的CSS规则。

然后，不管有多少.message您元素添加到您的.parent元素，CSS规则适用于他们平分。

例如，像这样的事情会起作用。 您可以使这种方法更有效，但这可以说明这个想法。

 $('input').on('change', function() { var v = $(this).val(); $('.parent').removeClass('font-1'); $('.parent').removeClass('font-2'); $('.parent').removeClass('font-3'); $('.parent').removeClass('font-4'); $('.parent').removeClass('font-5'); $('.parent').addClass('font-' + v); }); 

 .parent.font-1 .message { font-size: 1em; } .parent.font-2 .message { font-size: 2em; } .parent.font-3 .message { font-size: 3em; } .parent.font-4 .message { font-size: 4em; } .parent.font-5 .message { font-size: 5em; } .message-computer { color: red; } .message-user { color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" value="1" min="1" max="5" step="1" id="slider" ondrag="changeSize()" /> <div class="parent font-1"> <div class="message-computer message"><p>I AM ROBOT</p></div> <div class="message-user message"><p>Only human.</p></div> </div> 

Answer 3

您仅在修改现有节点。 如果您希望新节点采用这些规则，只需构建一个JavaScript函数即可动态添加或更新CSS节点

function changeSize(v)
{
     var css     = [

       ".message-computer p, .message-user p {font-size: "+v+"em;}"

    ].join("");

    var head    = document.head || document.getElementsByTagName('head')[0];
    var style   = null;

    if(!document.getElementById("customTextSize"))
    {
        style = document.createElement('style');
        style.id = "customTextSize";
        style.type  = 'text/css';
        style.appendChild(document.createTextNode(css));
        head.appendChild(style);
    }
    else
    {
        style = document.getElementById("customTextSize");
        style.removeChild(style.firstChild);
        style.appendChild(document.createTextNode(css));

    }

}

在您进行更改时，只需调用以下函数：

    changeSize(v)