Question

目的是逐个改变#text中所有字符的颜色，我做了一个循环：

function myFunction() {
        var letters = document.getElementById('text');
        for (var i = 0; i < letters.innerHTML.length; i++) {
            //only change the one you want to
                letters.innerHTML = letters.innerHTML.replace(letters[i], '<span style="color: yellow;">'+letters[i]+'</span>');
           }
    }

它不起作用但也没有显示任何错误。

https://jsfiddle.net/zkbctk2h/

Answer 1

这是因为您正在更新这些字母，然后阅读下一封信。您应该使用innerText而不是innerHTML，因为这样您才能获得文本。

示例小提琴：https://jsfiddle.net/zkbctk2h/25/

function myFunction() {
    var letters = document.getElementById('text'),
        str = letters.innerText,
        newString = "";

    for (var i = 0; i < str.length; i++) {
        //only change the one you want to
            newString += '<span style="color: yellow;">'+str[i]+'</span>';
       }

    letters.innerHTML = newString;
}

我建议读一次，然后写一次dom。如果您在浏览器中读取和写入强制重绘，则会在浏览器中触发。因此，如果您有大文本，它可能会变慢。

Answer 2

我建议用id = "text"存储元素的文本，并用旧文本构建一个新的字符串，因为replace会替换第一个找到的可能不是所需字符的字符，因为被替换的字符包含冷一个不应该被替换的角色。

function myFunction() {
    var letters = document.getElementById('text'),
        text = letters.innerHTML
      
    letters.innerHTML = '';    
    for (var i = 0; i < text.length; i++) {
        letters.innerHTML += '<span style="background-color: yellow;">' + text[i] + '</span>';
    }
}

myFunction();

<div id="text">abracadabra</div>

setInterval和clearInterval

的一些打字机功能

function myFunction() {
    var letters = document.getElementById('text'),
        text = letters.innerHTML,
        i = 0;
      
    return function () {
        var j;
        if (i < text.length) {
            letters.innerHTML = '';
            for (j = 0; j <= i; j++) {
                letters.innerHTML += '<span style="background-color: yellow;">' + text[j] + '</span>';
            }
            letters.innerHTML += text.slice(j);
            i++;
        } else {
            clearInterval(interval);
        }
    }
}

var interval = setInterval(myFunction(), 500);

<div id="text">abracadabra</div>

Answer 3

建议采用更具功能性的方法：

const myFunction = id =>
  document.getElementById(id).innerHTML
    .split('')
    .map(c =>
      `<span style="color: green;">${c}</span>`
    )
    .join('')

document.getElementById('text').innerHTML = myFunction('text')

<div id="text">Hello World</div>

更改字母颜色的循环

3 个答案: