它是如何工作的？

你像往常一样给你写HTML：

<h1 class="fancy_title">Some Title</h1>

添加了一些JS魔法：

$(document).ready(function() {
  $(".fancy_title").lettering();
});

（请注意，fonts.js取决于jQuery，所以你应该对它有点熟悉。如果你不熟悉，那么现在是开始的好时机。）

而且......Voilà！您的HTML替换为：

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

现在，您可以随意使用这些新类来设置字母样式：

.fancy_title .char1 {
  color: red
}

.fancy_title .char6 {
  color: green
}

额外提示：使用：nth-child选择器

thie：nth-child选择器允许您为与特定角色匹配的每个元素重复您的样式。

我制作了一个简单的代码段来展示它的强大功能：

$(document).ready(function() {
  $(".fancy_title").lettering();
});

.fancy_title span:nth-child(4n+1) {
   color : red
}

.fancy_title span:nth-child(4n+2) {
   color : blue
}

.fancy_title span:nth-child(4n+3) {
   color : gold
}

.fancy_title span:nth-child(4n+4) {
   color : green
}

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js

"></script>
</head>
<body>
  
  <h1 class="fancy_title">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eveniet ea esse deleniti et illum dicta, reiciendis quia sunt quasi saepe voluptates fuga aut blanditiis perspiciatis! Rem, tempore iste vel.
  </h1>
  
</body>
</html>

了解更多关于：nth-child的信息：https://css-tricks.com/how-nth-child-works/

Answer 2

假设您的HTML中有一段如下

<p id="my-par">Sentence</p>

您可以在javascript中执行此操作。将每个字母包裹在<span>标记中。

var par = document.getElementById("myPar");
var colors = ["red", "blue", "green", "orange"];

par.innerHTML = par.innerHTML.split('').map(function(c) {
    return "<span class='" + colors[Math.floor(Math.random() * colors.length)] + 
    "'" + ">" + c + "</span>"
}).join('');

http://jsfiddle.net/ua9of1ux/1/

Answer 3

一种解决方案：
无需添加任何脚本只需vanilla CSS-HTML-JS

// we make a function in charge
// to split the content and to 
// wrap each letter in a span with
// CSS class of your choice
function update (){
  var el = document.getElementById('toChange');
  var curVal = el.innerText || el.textContent;

  var newVal = curVal.split('').map(function(curLetter , index){
    return '<span class="color_'+ (index+1) +'">' + curLetter + '</span>';
  })

  el.innerHTML = newVal.join('');
}

/* The list of your colors and class name*/
span,div {
  font-size : 42px;
  }
.color_1{
  color : blue;
}
.color_2{
  color : yellow;
}
.color_3{
  color : red;
}
.color_4{
  color : pink;
}
.color_5{
  color : brown;
}
.color_6{
  color : purple;
}

.color_6{
  color : green;
}

<span class='color_1'>E</span><span class='color_2'>x</span><span class='color_3'>a</span><span class='color_4'>m</span><span class='color_5'>p</span><span class='color_6'>l</span><span class='color_7'>e</span>

<div id='toChange'>Example</div>
<button onclick='update()'>click to change above</button>

Answer 4

以下是一个例子：

<p><span id="s1">W</span><span id="s2">O</span><span id="s3">R</span><span id="s4">D</span></p>

使用Javascript：

s1.setAttribute("style", "color:Red");
s2.setAttribute("style", "color:Blue");
s3.setAttribute("style", "color:Green");
s4.setAttribute("style", "color:Brown");

在一个词的不同的信件颜色

4 个答案:

它是如何工作的？

额外提示：使用：nth-child选择器

在一个词的不同的信件颜色

4 个答案:

它是如何工作的？

额外提示：使用：nth-​​child选择器

额外提示：使用：nth-child选择器