我需要设计一个JavaScript脚本，将给定的文本字符串写入屏幕，以便随机设置每个字符的大小和颜色，至少使用7种颜色和5种大小。我可以让字符串随机改变颜色和大小，但我似乎无法让它适用于每个字母。我已经包含了我的代码，注释掉的代码是我尝试过的，但不起作用。
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 id="header" name="header" value="">JavaScript is fun!</h1>
<button type="button" onclick="randomizeText()">Randomize!</button>
<script language="JavaScript">
// <!--
function generateRandomColor() {
var colors = ["green", "blue", "red", "yellow", "cyan", "orange", "magenta"];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
return randomColor;
};
function generateRandomFontSize() {
var sizes = ["12px", "14px", "16px", "18px", "20px"];
var randomSize = sizes[Math.floor(Math.random() * sizes.length)];
return randomSize;
};
function randomizeText() {
document.getElementById("header").style.color = generateRandomColor();
document.getElementById("header").style.fontSize = generateRandomFontSize();
// var newHeaderText = "";
// for (var i = 0; i < headerText.length; i++) {
// var letter = headerText.charAt(i);
// // letter.style.fontSize.generateRandomFontSize();
// // letter.style.color.generateRandomColor();
// // newHeaderText = newHeaderText.concat(letter);
// }
// document.write(newHeaderText);
};
// document.getElementById("header").innerHTML = headerText;
// Javascript ends here-->
</script>
</body>
</html>split和join字符串，用span包装每个字母。然后，您可以为每个跨度指定不同的颜色。
function generateRandomColor() {
var colors = ["green", "blue", "red", "yellow", "cyan", "orange", "magenta"];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
return randomColor;
};
function generateRandomFontSize() {
var sizes = ["12px", "14px", "16px", "18px", "20px"];
var randomSize = sizes[Math.floor(Math.random() * sizes.length)];
return randomSize;
};
function randomizeText() {
var elem = document.getElementById("header")
elem.style.color = generateRandomColor();
elem.style.fontSize = generateRandomFontSize();
elem.innerHTML = span_it(elem.innerText);
// now each letter
var spans = elem.querySelectorAll("span");
spans.forEach(span => span.style.color = generateRandomColor())
};
function span_it(str) {
return str.split("").map(letter => "<span>" + letter + "</span>").join("")
}<h1 id="header" name="header" value="">JavaScript is fun!</h1>
<button type="button" onclick="randomizeText()">Randomize!</button>