文字列とスタイルの個々の文字をループする

Question

"INTRO TO GRID"というタイトルがあり、文字列 "GRID"の文字を個別にスタイルしたいと思っています。私はCSSでこれを行うことができますが、私はJSで試してみたいと思います。私は個々の文字に.css（）を付ける方法を理解するのが難しいです。参考のために私のコードを添付しました。前もって感謝します！

var header = $("#header").text(); 

var grid = header.substring(9, header.length); 

var chars = grid.split(""); 

for(var i = 0; i < chars.length; i++){ 
    console.log(chars[i]); 
} 

console.log(chars); 

助けを借りて、前のコメント作成者の助けを借りて、ここに私の問題の解決策を示します。 @ジョンUleisが正しい

var header = $("#header"); 

var chars = header.text().split(""); 

var headerSpans = chars.map(function(char){ 
    return $('<span>' + char + '</span>'); 
}); 

$(header).html(headerSpans); 

for(var i=9; i <= headerSpans.length; i++){ 
    headerSpans[i].css({ 
     "margin" : "20px", 
     "background-color" : "red" 
    }); 
} 

Answer 1

、あなたは個々の文字のスタイルを設定することはできません。しかし、あなたは<span>のように、DOM要素のスタイルを設定することができます

var header = $('#header'), 
 
    headerSpans = header.text() 
 
         .split("") 
 
         .map(function(char){ 
 
          return $('<span>' + char + '</span>'); 
 
         }); 
 
header.html(headerSpans); 
 

 
headerSpans[9].css('color', 'red'); 
 
headerSpans[10].css('color', 'blue'); 
 
headerSpans[11].css('color', 'green'); 
 
headerSpans[12].css('color', 'orange');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header">INTRO TO GRID</div>

Answer 2

は、あなたが特定のHTML要素からか、ヘッド部からアクセスできるスタイルオブジェクトを使用してJavaScriptを使用して要素のスタイルを変更することができますドキュメントのスタイル文書hereの詳細については、こちらをご覧ください。

問題の解決策はたくさんありますが、わかりやすいものを提供しようとしました。

私のソリューション：

1. あなたは、あなたのテキストを保存するHTML要素を取得する必要があります。 （私の例では、idがのルート要素です）

2. テキストのすべての文字を1つの配列に格納します。 （私の例では、配列の名前はのテキストです）。

3. forEachメソッドを使用して文字のループスルー配列を作成します（forEachの詳細はhereを参照）。

4. forEachメソッド内のすべての文字に新しいspan要素を作成します。

5. テキストノードのすべての文字を折り返して、作成したスパンに追加します。

6. あなたがしたいと思うすべてのスパンスタイル。 （ifステートメントは、 "GRID"という単語だけにスタイリングを制限するために使用されます）。

7. テキストが表示されるdiv要素に、作成され、スタイルされたスパンを追加します。

ソリューションコード：

const div = document.getElementById(`root`); // div from HTML 
 

 
const text = `INTRO TO GRID`.split(``); // every character of your text stored in array 
 

 
text.forEach((char, index) => { 
 

 
    const node = document.createElement(`span`); // create new span element     
 
    const textnode = document.createTextNode(char); // create character as text node for span element 
 
    
 
    node.appendChild(textnode); // add text to span 
 
    
 
    // if you want only to style characters only in the word `GRID` 
 
    if(index >= text.length - `GRID`.length){ 
 
    
 
    // style the characters however you want to 
 
    node.style.color = index % 2 === 0 ? `red` : `black`; // change color 
 
    node.style.fontWeight = index % 2 !== 0 ? 900 : 1; // change font weight 
 
    } 
 
    
 
    div.appendChild(node); // add span (character) to the div element in HTML 
 
});

<div id="root"> 
 
    
 
</div>