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

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

javascript

Javascript 如何更改标题中单个字符的颜色,javascript,Javascript,我的目标是获取一个标题，并且只使用JavaScript（无JQuery），随机为每个字母着色。我所拥有的似乎非常接近： <!DOCTYPE html> <html> <body> <h1 id="demo">TEST</h1> <script language="javascript" type="text/javascript"> function myFunction() { var x=document.getE

我的目标是获取一个标题，并且只使用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>


试验
函数myFunction（）
{
var x=document.getElementById（“演示”）；
var l=x.innerHTML.length；
var newText=“”；
对于（var a=0；a嗯，在调用函数一次后，x.innerHTML
不仅包含文本，还包含font
元素的HTML。如果您只想获取内部文本，可以使用或innerText
（取决于浏览器）：
但是你真的不应该再使用font元素了，它早就被弃用了。
好吧，调用函数一次后，x.innerHTML
不仅包含文本，还包含font
元素的HTML。如果你只想获取内部文本，你可以使用或innerText
（取决于浏览器）:
但是你真的不应该再使用字体元素了，它早就被弃用了。
警告：元素被弃用了
此功能是非标准的，不在标准上
跟踪。不要在面向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;
}

函数myFunction（）
{
var x=document.getElementById（“演示”），
txt=x.textContent，
newText=“”；
for（var i=0，l=txt.length；i警告：和
元素不推荐使用
此功能是非标准的，不在标准上
跟踪。不要在面向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;
}

函数myFunction（）
{
var x=document.getElementById（“演示”），
txt=x.textContent，
newText=“”；
对于（var i=0，l=txt.length；i您可以使用
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;
    })();
}

函数myFunction（）
{
var x=document.getElementById（“演示”），
txt=x.html；
（myFunction=函数（）{
var newText=“”；
对于（var i=0，l=txt.length；i您可以使用
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;
    })();
}

函数myFunction（）
{
var x=document.getElementById（“演示”），
txt=x.html；
（myFunction=函数（）{
var newText=“”；
对于（var i=0，l=txt.length；i那么，您可以在替换文本之前，将文本移动到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>

把那个翻过来
好的，在替换文本之前，您可以在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>

把那个翻过来
我不确定如何使用vanilla JS，但在jQuery中，可以使用.text（）获取字符串
这将省略HTML标记。为了设计每个字母的样式，您必须将其包装在一些东西中。考虑到您正在努力完成的任务，span
是最合适的。font
已被弃用，您应该逐步淘汰，而不是将其添加到新代码中。如果您决定使用jQuery，请查看我不确定如何使用van但是在jQuery中，可以使用.text（）获取字符串
这将省略HTML标记。为了设计每个字母的样式，您必须将其包装在某些东西中。span
是最合适的，考虑到您正在尝试完成的任务。font
已被弃用，您应该逐步淘汰它，而不是将其添加到新代码中。如果您决定使用jQuery，请检查它是否有效。T感谢hanks对它被弃用的警告。我在研究过程中发现了这一点，但我只是想让它发挥作用。这对我来说只是一个小小的锻炼。特别感谢更好的选择！如果它是阿拉伯文或其他语言的文本，如单词。دب㶀ی？它似乎在发挥作用。感谢它被删除的警告我在研究过程中发现了这一点，但我只是想让它发挥作用。这对我来说只是一个小小的锻炼。非常感谢有更好的选择！如果它是阿拉伯文或其他语言的文本，比如这个词呢？我感谢你的警告。我一定会记住，如果我在中国做过类似的事情生产。这只是我掌握入门级JavaScript诀窍的一个示例任务。我感谢你的警告。我一定会记住，如果我在生产中做过类似的事情。这只是我掌握入门级JavaScript诀窍的一个示例任务。