將.style 和 class 添加到數組元素 [Javascript]

Question

我正在嘗試制作一個彩色徽標，以准確地在 hover 上為徽標中的每個字母淡入和淡出隨機顏色。 當我 console.log(word) 沒有其他參數時，我得到了數組 My Portfolio，但似乎我無法添加 styles 或向數組中的元素添加類。 我意識到為什么它不起作用是有道理的，但是如何解決這個問題，所以我得到了彩虹效果。

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 function 以使其文本為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);
});