Changing the font-size of future elements with JavaScript

Question

I am building a simple chat bot.On each new message received from the server, a new HTML element is created and pushed to the browser. So, for example, message 1 will be:

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

Then you (the user) types/sends a message, which shows up as:

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

and so on and so forth. I created a slider to change the size of the text being sent to/from the chat bot. It now works, but it only edits EXISTING HTML elements. New messages sent to/from the server are still in the original size.

 $('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()" /> 

How can I make the change in font size apply to all new elements sent to the browser?

Thanks

Answer 1

Not sure I understand well your problem, your code snippet doesn't contain any text.

But when using jQuery to update style, CSS statment is added individualy into each element style attribute (look at your browser inspector). So newly added elements wont have their style attribute modified until you rechange the input value, and so will inherit from global CSS rules.

I suggest to apply the font style to the parents .message-computer & .message-user .
If you can't, wrap p elements into a dedicated div and apply the style to the div.

If you really need to apply it individually to each element, run $('input').trigger('change'); just after inserting new elements into the DOM.

Answer 2

What you want to do is add a class to a parent tag of your HTML, and to then have a CSS rule which applies to all of the like-elements on the page.

Then, no matter how many .message element you add to your .parent element, a CSS rule applies to them equally.

For instance, something like this would work. You could make this approach more efficient, but this illustrates the idea.

 $('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

You're only modifying existing node. If you want that new node take those rules simply build a javascript function that add or update dynamically a css node

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));

    }

}

On your on change simply call the function :

    changeSize(v)