Изменение размера шрифта будущих элементов с помощью 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-характеристика добавляется индивидуально в каждый атрибут стиля элемента (смотрите инспектор браузера). Таким образом, для вновь добавленных элементов их стиль не будет изменен до тех пор, пока вы не измените входное значение, и поэтому они будут наследовать от глобальных правил 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)