最初に実装図を見てみましょう
効果の実装手順：
1。使用する要素を取得します。
2。色の値を保存するための配列変数（ arrColor ）を宣言します。
3. [イベントをクリック]ボタンに追加します。
4.テキストボックスのvalueを取得し、 splitメソッドを使用してテキストボックスの文字列値をARRAY（ arr ）に変換し、保存します。
5.保存された配列（ arr ）の値をループアウトし、 spanを追加します。
6. spanラベルの背景色を設定します。配列（ arrColor ）から値をループします。
7.設定コンテンツをdivに追加します。
効果完全なコード：
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> jsでスプリットメソッドを使用して色付きのテキスト背景効果を実現する例</title> <style> div {width：300px;高さ：200px;国境：1pxソリッド＃333;背景：#fff;パディング：20px; Line-Height：40px; } span {padding：5px 15px;フォントファミリー：Microsoft Yahei; } </style> <script> window.onload = function（）{var odiv = document.getElementById（ 'div1'）; var ainp = document.getElementsByTagname（ 'input'）; var arrcolor = ['＃f00'、 '＃ff0'、 '＃f0f'、 '＃0ff']; ainp [1] .onclick = function（）{var str = ainp [0] .value; var arr = str.split（ ''）; for（var i = 0; i <arr.length; i ++）{arr [i] = '<span style = "background：'+arrcolor [i％arrcolor.length]+'">'+arr [i]+'</span>'; } odiv.innerhtml += arr.join（ ''）; }} </script> </head> <body> <div id = "div1"> </div> <入力タイプ= "text"/> <input type = "button" button "/> </body> </html>要約します
JSで分割方法を使用して色付きのテキストの背景効果を実現する例は終わりました。興味のある友人は、それがすべての人の勉強や仕事に役立つことを望んで、自分でそれを行うことができます。