gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 10:23:10 25 4
gpt4 key购买 nike

我的目标是获取标题并仅使用 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 方法实际执行 <FONT color=#FF0000>T</FONT><FONT color=#00FF00>E</FONT><FONT color=#0000ff>S</FONT><FONT color=#000000>T</FONT>这在我第一次按下按钮时有效,但下次我按下它时,它会为代码片段中的每个字母设置字体颜色。我已经根据代码中的警报确认了这一点。有没有更实用的给单个字母着色的方法?是否可以只从标题中检索字母而不是字母加上字体着色代码?我无法使用 JQuery,如果可能的话,我宁愿不使用 span。非常感谢!

最佳答案

好吧,调用函数一次后,x.innerHTML 不仅包含文本,还包含 font 元素的 HTML。如果只想获取内部文本,可以使用 textContentinnerText(取决于浏览器):

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 元素了,它早就被弃用了。

关于javascript - 如何更改标题中单个字符的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20806059/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com