Javascript 避免额外使用span

我的问题是我有一个html代码

Hello World

并希望使用JavaScript更改每个字母的css。基本上，我将更改背景颜色以制作动画。有没有一种方法可以做到这一点，而不用在每封信上加上一个空格或某种标签，也不用经历所有的挣扎

我有一个带颜色的字符串数组和一个调用正确颜色（数据索引属性）的方法

谢谢

---

编辑：我有一个改变颜色的整个单词，我想到了一个主意，通过创建一个函数来迭代innerHTML字符串的索引，并通过编辑Cymen提供的下面的函数来为字母的跨度指定一个数据索引。这是一个好方法吗？

不，您需要使用支持背景色的标记。您可以很容易地将字符串包装为跨距，如下所示：

function wrapInSpans(string) {
  return '<span>' + string.split('').join('</span><span>') + '</span>';
}

函数wrapinspands（字符串）{
返回“”+字符串。拆分（“”）.join（“”）+；
}

这需要相当多的代码才能完全解释清楚，但是，如果在您的案例中不实际添加某种类型的包装元素是非常重要的，那么我相信通过动态生成的背景图像可以做到这一点

大致步骤如下：

在所关心元素的

.textContent

s中的每个字符周围创建一个

范围

.getBoundingClientRect（）

在每个范围上获取其渲染维度

将所需颜色的矩形绘制到

将

导出为

数据

URI

将

数据

URI用作

背景图像

对您关心的每个块显示元素重复此操作

---

请注意，毫无疑问，在这种方法中存在各种边缘情况以及可能的浏览器支持限制。显然，只包装每个字符要简单得多。

您必须使用JavaScript函数将每个字符包装在

中

window.onload=function（）
var elem=document.getElementById（“someId”）；
var text=elem.innerHTML；//获取的文本内容
elem.innerHTML=“；//然后将设置为空
对于（var i=0；iNo，您必须使用span。@Brian是对的。文本节点提供很少的CSS挂钩。您仅限于几个伪元素：
第一个字母
和
第一行
。好的，谢谢！他们为什么不在HTML中使用此功能？另外，我如何访问单独的字符。是否有其他方法可以迭代在
@ytpillai中的每一个跨度上，他们没有将此作为HTML中的一个功能，因为这不是一件特别常见的事情，并且尝试在中烘焙每一个可能的功能都会导致一种复杂且难以学习的语言。要获得索引
i
中字符串的字符，可以执行
string[i]
或
string.getCharAt（i）
.Peter Olson，在本例中，我将把字符串转换为javascript字符串。但是，没有办法更改原始字符串中字符的innerHTML。我可以编写一个函数，将自定义属性数据索引设置为标记字符串中字母的索引。但是，有没有更有效的方法？@ytpillai您可以使用
p.getElementsByTagName（“span”）
（一旦您在JavaScript中定义了
p
），在
p
内迭代
span
）这是我一个字都不懂的最明确、解释最透彻的JavaScript。哈哈，很抱歉，我还是一个初学者，已经找到了一个可行的想法。我认为你的想法更倾向于绘制图像消息或其他东西，而我只是简单地使用文本和CSSThank
window.onload = function() { // when everything loads, run the function
     var elem = document.getElementById( "someId" );
     var text = elem.innerHTML; // get the <p>'s text content
     elem.innerHTML = ""; // then make the <p> empty
     for( var i=0; i<text.length; i++ ) { // for each character in the text
           elem.innerHTML += "<span>"+text[i]+"</span>";
     }
};