Question

我的问题是我有一个HTML代码 Hello World 

想要使用JavaScript更改每个字母的CSS。基本上，我会改变背景颜色来制作动画。有没有办法做到这一点，而不是在每个字母周围做一个跨度或某种标记，并经历所有这些困难？

我的字符串数组有颜色，方法调用正确的颜色（数据索引属性）。

谢谢！

编辑：我通过创建一个迭代innerHTML字符串索引的函数并为字母分配数据索引，让整个单词改变颜色并思考一个想法。通过编辑 Cymen 下面提供的功能来跨越。这是一个好方法吗？

Answer 1

不，您需要使用支持function wrapInSpans(string) { return '' + string.split('').join('') + ''; }的标记。您可以轻松地将一串字符包裹在跨度中：

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var About = require('./About');
var Inbox = require('./Inbox');

var App = React.createClass({
    render () {
      return (
        <div>
          <h1>App</h1>
          <RouteHandler/>
        </div>
      )
    }
});

var routes = (
  <Route handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);

Router.run(routes, Router.HashLocation, (Root) => {
    React.render(<Root/>, document.getElementById('app'));
});

Answer 2

这需要相当多的代码才能完全拼出来，但是，如果在你的情况下非常重要的是不实际添加某种类型的包装元素，那么我相信这可以通过动态生成背景图片。

大致的步骤是：

创建一个Range，其中包含您所关注元素的.textContent中每个字符的开头和结尾。
.getBoundingClientRect()在每个范围内获取其渲染尺寸。
将所需颜色的矩形绘制为<canvas>。
将<canvas>导出为data URI。
将data URI用作background-image。
对您关注的每个块显示元素重复。

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

Answer 3

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

中

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>";
     }
};

记得改变＆＃34; someId＆＃34;到元素的ID。

您可以使用for访问text[i]循环中的每个角色。

避免额外使用span

3 个答案: