Javascript 如何更改输入文本中每个字符的样式

在这里，我想随机更改文本中每个字符的CSS。 如果我输入堆栈，我会得到红色的S，蓝色的t，绿色的a。。。输入字段底部的etc

var myModel={
姓名：“Mayur”，
};
var myViewModel=新的Vue({
el:'我的观点'，
资料来源：myModel
});
span{
颜色：绿色；
字号：600；
字体大小：20px；
}

输入名称：
欢迎，{name |大写}}

我没有使用过Vue，也不熟悉它的内部事件和流程，但这里有一个我用纯JavaScript制作的小型原型：


document.querySelector（'button'）。onclick=function（）{
设span=document.querySelector（'span.letters'），
text=span.textContent；
span.innerHTML=''；
数组.from（text）.map（函数（l）{
让color=document.createElement（'span'）；
color.innerHTML=l；
color.style.color='rgb'+
随机区间（0，255）+'，'+
随机区间（0，255）+'，'+
随机区间（0255）+’）；
span.追加子项（颜色）；
});
}
函数随机间隔（最小值、最大值）
{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
堆栈
随机颜色
Html:

<div>Type something here, then click on the white space beneave.</div>
<input type="hidden" id="hidden">

您可以访问以执行

链接中给出了html和css代码。
它随机为字符提供颜色，但可以轻松操作，或者如果您希望字符随机运行，可以直接使用它。
看看这是否有帮助！
$("div").prop("contentEditable", true).blur(function(){
    var chars = $(this).text().split("");
    $("#hidden").val($(this).text());
    this.innerHTML = "";
    $.each(chars, function(){
        $("<span>").text(this).css({
            color: "#"+(Math.random()*16777215|0).toString(16)
        }).appendTo("div");
    });
});

div{
    border: 1px solid black;
    width: 400px;
    height: 20px;
    padding: 2px 3px;
    overflow: hidden;
}