JavaScript - 2022-01-23

文字列を自動で一文字ずつspanタグで囲む方法

今回は文字列を一文字ずつspanタグで囲む方法です。
CSSで一文字ずつアニメーションさせたい時に便利です。

html

<p id="js-text-split">Hello World!</p>

js

var element = document.querySelector('#js-text-split');
var text = element.textContent;

element.innerHTML = null;

text.split('').forEach(function (c) {
  element.innerHTML += '<span>'+c+'</span>';
});
Related Posts

Related Posts

JQueryで動画・画像をランダムに再生させる方法

2019-08-26

JQuery セレクトボックスで表示を切り替える方法

2022-03-30

WebStorageを使って初回アクセス時だけLoadingを表示する方法

2022-01-11

slick.jsにオートプレイの切り替えボタンをつける方法

2022-06-22