Question

我的目标是获取标题并仅使用JavaScript（无JQuery），随机为每个字母着色。我所拥有的似乎非常接近：

<!DOCTYPE html>
<html>
<body>
<h1 id="demo">TEST</h1>

<script language="javascript" type="text/javascript">
function myFunction()
{
  var x=document.getElementById("demo");
  var l=x.innerHTML.length;
  var newText="";
  for(var a=0;a<l;a++)
  {
    var letter = x.innerHTML.charAt(a);
    newText += letter.fontcolor(getColor());
  }
  x.innerHTML=newText;
  alert(x.innerHTML);
}

function getColor()
{
  var colorString="";
  for(var i=0;i<6;i++)
  {
    var num = Math.floor(Math.random()*17);
    hexNum = num.toString(16);
    colorString += hexNum;
  }
  return colorString;
}
</script>
<button type="button" onclick="myFunction()">Change Color</button>
</body>
</html>

正在发生的事情是fontcolor方法实际上TEST这是我第一次按下按钮时工作，但下次我点击它时，它会为代码片段中的每个字母执行fontcolor。我已根据我的代码中的警报确认了这一点。是否有更实用的方法为单个字母着色？是否可以只从标题中检索字母而不是字母加字体着色代码？我无法使用JQuery，如果可能的话，我宁愿不使用跨度。非常感谢！

Answer 1

好吧，在调用该函数后，x.innerHTML不仅会包含文本，还会包含font元素的HTML。如果您只想获取内部文字，可以使用textContent或innerText（取决于浏览器）：

var x = document.getElementById("demo");
var text = x.textContent || x.innerText;
var newText="";
for(var a=0; a < text.length; a++) {
    var letter = text.charAt(a);
    // ...
}

如果你不关心IE8或IE7，你可以用以下方式更优雅地做到这一点：

var new_text = Array.prototype.map.call(x.textContent || x.innerText, function(letter) {
    return letter.fontcolor(getColor());
}).join('');

但你真的不应该再使用font元素了，因为它已经被淘汰了。

Answer 2

警告：不推荐使用fontcolor is not standard和元素！

此功能不符合标准，不符合标准跟踪。不要在面向Web的生产站点上使用它：它不会为每个用户工作。两者之间可能存在很大的不兼容性实现和行为可能在未来发生变化。

您可以使用.textContent：

function myFunction()
{
    var x = document.getElementById("demo"),
        txt = x.textContent,
        newText = "";
    for(var i=0, l=txt.length; i<l; i++)
    {
        newText += txt.charAt(i).fontcolor(getColor());
    }
    x.innerHTML = newText;
}

Demo

Answer 3

您可以使用

function myFunction()
{
    var x = document.getElementById("demo"),
        txt = x.innerHTML;
    (myFunction = function() {
        var newText = "";
        for(var i=0, l=txt.length; i<l; i++)
        {
            newText += '<span style="color:#'+getColor()+'">'+txt.charAt(i)+'</span>';
        }
        x.innerHTML = newText;
    })();
}

Demo

它适用于旧浏览器，因为它不使用.textContent，并且不使用非标准fontcolor

Answer 4

好吧，你可以在替换文本之前，移动title属性中的文本，然后使用原始文本的属性，然后你将始终拥有原始文本。例如：

<h1>Flip That</h1>

然后你有你的脚本，如果之前没有设置了随机颜色设置标题，如下所示：

<h1 title="Flip That">Flip That</h1>

然后，您始终使用标题代替原始字符串：

<h1 title="Flip That"><font color="#0a0a0a">F</font><font color="#0b0b0b">l</font><font color="#0c0c0c">i</font><font color="#0d0d0d">p</font><font color="#0e0e0e"> </font><font color="#0a0a0a">T</font><font color="#0b0b0b">h</font><font color="#0b0b0b">a</font><font color="#0b0b0b">t</font></h1>

如何更改标题中单个字符的颜色

4 个答案: