javascript - 给h1的最后两个字母涂其他颜色

Question

我有一个 h1 标签，代码看起来像那样

HTML

<h1>AwesoME</h1>

CSS

h1 {
color:#eee
}

h1:last-word {
color:#000
}

我只想更改 h1 的最后两个字母。是否可以使用 javascript 或 jQuery

Answer 1

这是一个 jQuery 解决方案:

$('h1').html(function() {
  var txt= $(this).text();
  return txt.substr(0, txt.length-2)          //all but the last two characters
         + '<span>'+txt.slice(-2)+'</span>';  //put last two characters in a span
});

h1 {
  color:#eee
}

h1 span {     /* different color for span */
  color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>AwesoME</h1>

---

这是一个普通的 JavaScript 解决方案:

var h1= document.querySelector('h1'),
    txt= h1.textContent;

h1.innerHTML= txt.substr(0, txt.length-2)          //all but the last two characters
              + '<span>'+txt.slice(-2)+'</span>';  //put last two characters in a span

h1 {
  color:#eee
}

h1 span {     /* different color for span */
  color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>AwesoME</h1>