在单个元素上设置不同的样式

Question

考虑我有HELLO_WORLD这样的文字，我有兴趣设置2种不同的风格。例如，我可以将 HEllo _ 设置为绿色，将 WORLD 设置为蓝色。

因为我像HELLO_WORLD一样加载了所有角色。 我对

等解决方案不感兴趣

<div style=s1>HELLO_</div>
<div style=s2>WORLD</div>

我正在寻找的东西就像一个获得数字的函数，并将style1设置为该字符前的字母，并将其他样式应用于其余的

 function  applyStyle(charracterNumber){

    //Apply style1 to chars before charracterNumber
   .
   .
   .  
 //Apply style2 to chars after charracterNumber

}

charracterNumber是integer

Answer 1

样式应用于HTML元素，而不是元素的某些部分或其内容。因此，要应用不同的样式，您将需要不同元素的内容。

Answer 2

非常简单。

HTML中有一个名为span的元素。 它没有固有的含义（没有默认的样式更改）。

您可以将段落的各个部分放在span中。 它是为不同的文本范围设置不同的样式。 放置文本的不同部分，为每个部分设置不同的样式。

对于您的代码，请使用：

＆＃13;

＆＃13;

<div><span style="color:green">HELLO_</span><span style="color:blue">WORLD</span>
</div>

＆＃13;

＆＃13;

＆＃13;