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。

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

Answer 2

您仅在修改现有节点。如果您希望新节点采用这些规则，只需构建一个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)

Answer 3

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

然后，无论您向.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>

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

3 个答案: