将 .style 和 class 添加到数组元素 [Javascript]

Question

我正在尝试制作一个彩色徽标，以便在悬停徽标中的每个字母时淡入和淡出随机颜色。当我在没有其他参数的情况下控制台.log(word(时，我得到了数组我的投资组合，但似乎我无法为数组中的元素添加样式或添加类。我意识到为什么它不起作用是有道理的，但如何处理这个问题，所以我得到了彩虹效果。

let logo = document.querySelector("#rainbow");
function transition() {
let words = logo.textContent.split("");
words.forEach((word) => {
word.style.color = getRandomColor();
word.classList.toggle("fade");
})
}
logo.addEventListener("mouseover", transition());
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

.HTML

<a href="/" id="rainbow" class="navbar-brand">My Portfolio</a>

谢谢！

顺便说一句，请不要使用Jquery。

Answer 1

不能更改单个字符的样式。在你的words.foreach中，你在word变量中得到一个字符。你必须为每个角色创建一个不同的元素来改变它的颜色。这里的变化是，在foreach中，您将为每个字母创建不同的元素并相应地设置其样式，然后将它们添加为anchor的子项。

let logo = document.querySelector("#rainbow");
function transition() {
let words = logo.textContent.split("");
logo.innerHTML = ""; // Remove previous word
words.forEach((word) => {
var current = document.createElement("span"); // Create element
current.style.color = getRandomColor();
current.innerHTML = word
current.classList.toggle("fade"); // CSS class for fade in/out
logo.appendChild(current); // Add as child of anchor
})
}
logo.addEventListener("mouseover", transition());
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

<a href="/" id="rainbow" class="navbar-brand">My Portfolio</a>

Answer 2

为了使每个字母具有不同的颜色，您需要将每个字母包装在 span 元素中，并每次将颜色样式添加到该元素中，您可以在在线代码荧光笔中看到这一点。

我使它动态化，因此您可以在任何html元素上调用ranbowit函数以使其文本具有ranbow样式。

const randNum = max => Math.floor(Math.random() * max),
getRandomColor = _=> `rgb(${randNum(256)},${randNum(256)},${randNum(256)})`;
rainbowIt = element => element.innerHTML = element.innerText.split("").map(letter =>
`<span style="color: ${getRandomColor()}">${letter}</span>`).join("");
document.querySelectorAll("body *").forEach(element => rainbowIt(element));

<h1>My Portfolio</h1>
<h2>My Portfolio</h2>
<h3>My Portfolio</h3>
<h4>My Portfolio</h4>
<h5>My Portfolio</h5>
<h6>My Portfolio</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus diam ut cursus pretium. Quisque a pharetra augue. Duis sagittis diam ut augue tristique, sit amet sagittis felis blandit. Ut ornare magna ac urna pulvinar, nec bibendum leo pellentesque. Suspendisse ullamcorper viverra facilisis. Aenean ornare risus at dolor laoreet, eget pretium ante ultrices. Fusce fringilla felis vel sapien dignissim, at finibus dolor commodo. Morbi nec gravida tortor. Nunc euismod pulvinar elementum. Fusce at massa volutpat, maximus mauris vel, aliquet nisl. Cras nec nisl nec purus tristique semper. Aenean imperdiet mi diam, at vehicula orci iaculis ut. Nullam bibendum, tellus nec egestas tristique, nibh leo feugiat lectus, eget posuere justo tellus et sem. Vivamus suscipit dignissim nunc, in eleifend metus sollicitudin at. In consectetur tincidunt purus. Duis molestie consequat lacus, sed commodo metus porta in.</p>

注意：如果您不熟悉 ES6 功能，以下是旧语法中的相同功能，并且也记录在案：

// get a random number 0-255 both included, just to get random rgb values
function randNum(max) {
return Math.floor(Math.random() * max);
}
// get a random rgb style text for example `rgb(239, 143, 12)`
function getRandomColor() {
return "rgb(" + randNum(256) + "," + randNum(256) + "," + randNum(256) + ")";
}
/* get all the letters from the element and make an array, loop over it and wrap
each letter in a span element with a random color style, then convert it to text 
and add it to the element*/
function rainbowIt(element) {
element.innerHTML = element.innerText.split("").map(function(letter) {
return '<span style="color: ' + getRandomColor() + '">' + letter + '</span>';
}).join("");
}
// loop over all the children of body just for demonstration
document.querySelectorAll("body *").forEach(function(element) {
rainbowIt(element);
});