javascript - 如何更改输入文本每个字符的样式

Question

这里我想随机更改文本每个字符的CSS。 就像我输入 Stack 一样，我会在输入字段的底部得到红色的 S、蓝色的 t、绿色的 a...等等。

var myModel = {
	name: "Mayur",
};

var myViewModel = new Vue({
	el: '#my_view',
	data: myModel
});

span{
color:green;
font-weight:600;
font-size:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name" />
  <p>Welcome, <span>{{ name | uppercase }}</span></p>
</div>

Answer 1

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

document.querySelector('button').onclick = function (){
    let span = document.querySelector('span.letters'),
        text = span.textContent;
    span.innerHTML = '';
    Array.from(text).map(function(l){
        let color = document.createElement('span');
        color.innerHTML = l;
        color.style.color = 'rgb(' +
            randInterval(0, 255) + ',' +
            randInterval(0, 255) + ',' +
            randInterval(0, 255) + ')';
        span.appendChild(color);
    });
}

function randInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

<div><span class="letters">STACK</span></div>

<button>Random colors</button>

我特意将 rgb() 的每个值随机化的函数放在一个函数中，这样您就可以轻松更改它(现在颜色是真正随机的)。如果你想让颜色变深，你需要降低 max 值。如果你想要颜色更浅，你需要增加 mins。