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

您可以使用样式对象更改元素的样式，可以从特定HTML元素或文档的head部分访问。详细了解样式文档here。

您的问题有很多解决方案，但我试图为您提供一个易于理解的解决方案。

我的解决方案：

您需要获取存储文本的HTML元素。（在我的例子中，它是div元素，id是 root ）
将文本的每个字符存储在一个数组中。（在我的示例中，数组名称为 text ）。
使用forEach方法循环遍历字符数组。（有关forEach here的更多信息）。
为forEach方法内的每个字母创建新的span元素。
换行文本节点中的每个字符并将其附加到创建的范围。
根据您的需要设置每个范围的样式。（如果语句仅用于将样式限制为单词“GRID”）。
将创建并设置样式的span添加到将显示文本的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>

循环通过字符串和样式单个字母

2 个答案: