使用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)