logo标签列表

逐个字符更改字符串的字体

javascriptjquerystringtextfonts
3
如果我为每个字符设置一个唯一的#id，我知道如何逐个字符地更改字体样式，但是，我希望对整个网页进行此操作。有更有效的方法吗？或者创建数百个#ids是可行的选择吗？
<body>
    <div>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
    </div>

    <script src="jquery.js" type="text/javascript" ></script>   

    <script>
        var text = $("p").text();
        var newText = [];
        for (var i = 0; i < text.length; i++) {
            newText.push(text[i]);
            // ???????? function goes here ????????
        }
    </script>
</body>

最终，我认为我需要做的是将每个字符变成一个HTML对象？这是可能的吗？
你可以使用 text.split("") 将每个字符存储在一个数组中，无需编写 for 循环。 - tanmay
2个回答
2
将文本转换为数组，遍历每个字符并用<span>标签包装起来，并为其应用指定字体的类。
var text = $('p').text().split('');

text = text.map(function (char) {

    // you probably don't want to wrap spaces
    if (char === ' ') {
        return char;
    }

    return '<span class="comicSans">'+char+'</span>';
});

// convert the array back into a string
text = text.join('');

// replace the original string with the new 'fancy' string
$('p').text(text);

style.css

.comicSans {
  font-family: "Comic Sans";
}
0

HTML

<h1 id='name'>HULK IS GETTING ANGRY</h1>

JS

$(document).ready(function(){
  var name = $('#name').text();
  var i = 0;

  function changeColor () {
    setTimeout(function () {
      var firstPart = name.substr(0,i);
      var secondPart = name.substr(i,name.length);
      var newHtml = '<span style="color:green; font-family: \'Comic Sans MS\';">'+firstPart+'</span>'+secondPart;

      if (i < name.length) { 
        changeColor();
      }
      i++;
    }, 500);
  }
  changeColor();
});

看看这个 CodePen 代码片段

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接