遍歷字符串並設置單個字母的樣式

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);

在以前的評論者的幫助下，這是我的問題的解決方案。

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

@Jon Uleis是正確的，您不能為單個字符設置樣式。 但是您可以設置DOM元素的樣式，例如<span> ：

 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

您可以使用樣式對象來使用JavaScript更改元素的樣式，該對象可以從特定的HTML元素或從文檔的頭部訪問。 在此處找到有關樣式文檔的更多信息。

有很多解決您的問題的方法，但我嘗試為您提供一種易於理解的方法。

我的解決方案：

1. 您需要獲取用於存儲文本的HTML元素。 （在我的示例中，是div元素，其id是root ）

2. 將文本的每個字符存儲在一個數組中。 （在我的示例中，數組的名稱為text ）。

3. 使用forEach方法循環遍歷字符數組。（有關forEach的更多信息，請參見此處 ）。

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>