Different letter colors in a word [closed]

前端未结

关注

 4  760

日久生厌

相关标签:

4条回答

小鲜肉

2021-01-25 02:33

Here is an example:

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

0 讨论(0)

谎友^

2021-01-25 02:46

Suppose in your HTML, you have a paragraph as follows

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

You can do this in javascript. Wrap each letter in a <span> tag.

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/

0 讨论(0)

既然无缘

2021-01-25 02:51

Yes there is, and a popular one, too
http://letteringjs.com/

How it works?

You write you HTML as usual:

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

Adds a bit of JS magic:

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

(Note that lettering.js depends on jQuery, so you should be somewhat familiar with it. if you're not, it's a good time to begin.)

And.. Voilà! your HTML replaced with this:

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

Now, you can freely use these new classes to style your letters as you like:

.fancy_title .char1 {
  color: red
}

.fancy_title .char6 {
  color: green
}

Extra tip: use the :nth-child selector

thie :nth-child selector allows you the repeat your styles for each element that match a certain role.

I made a simple code snippet to demonstrates its power:

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

Read more about :nth-child here: https://css-tricks.com/how-nth-child-works/

0 讨论(0)

广开言路

2021-01-25 02:51

One Solution :
No need to add any script just 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>

0 讨论(0)

热议问题