Change only a part of an html text's style-CodePudding

function changeEveryCharColor(id)
{
    var part;
    var whole = ""; 
    var cool1 = document.getElementById(id).innerHTML;
    console.log(cool1);
        for(var i = 0; i < cool1.length; i  )
        {
          color1 = getRandomInt(255);
          color2 = getRandomInt(255);
          color3 = getRandomInt(255);
          part = cool1.substring(i, i   1);
          part.style = "color: rgb("   color1   ", "   color2   ", "   color3   ")";
          //^^ this part does not work. 
          whole = whole   part; 
        }
    console.log(whole);
    document.getElementById(id).innerHTML = whole;
}   
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "rain2"onmouseover="changeEveryCharColor(id)" >
I should change the color of every character in this tag when mouse hovers over me.
</h1>
</body>
</html>

I wish to change the color of a specific character in a tag. I tried to do it with code snippet but it will not work. I know it has to do with the style attribute but I do not know how to configure it properly.

I've looked at other posts but they give solutions that do not help me.

CodePudding user response：

You cannot change the color of a character like in your example with substring, that will return a simple string and not an HTML element that has the style attribute.

To change the color of each character, each character should be a separate HTML element. You can use the <span> element for this, like so:

function changeEveryCharColor(id) {
  const elem = document.getElementById(id);

  // You need a way to do this only once. The code below adds the attribute data-hovered on the first run
  if (elem.getAttribute('data-hovered')) {
    return;
  } else {
    elem.setAttribute('data-hovered', 'true');
  }

  const fragment = document.createDocumentFragment();
  const text = elem.innerText;

  for (let i = 0; i < text.length; i  ) {
    const color1 = getRandomInt(255);
    const color2 = getRandomInt(255);
    const color3 = getRandomInt(255);

    const span = document.createElement('span');
    span.textContent = text.substring(i, i   1);
    span.style.color = `rgb(${color1}, ${color2}, ${color3})`;

    fragment.appendChild(span);
  }

  elem.replaceChildren(fragment);
}

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

<h1 id="rain2" onm ouseover="changeEveryCharColor(id)">
  I should change the color of every character in this tag when mouse hovers over me.
</h1>

CodePudding user response：

function changeEveryCharColor(id) {
  let coolText = document.getElementById(id);
  let text = '';
  let chars;

  if (coolText.childElementCount) {
    // if text is already RGB, reset it then run the function again recursively
    coolText.childNodes.forEach(child => {
      text  = child.textContent
    })
    coolText.innerHTML = text;
    return changeEveryCharColor(id);
  } else {
    // else, if text is not RGB, make it RGB by getting each char
    chars = coolText.innerHTML.split('').map(char => {
      if (char) {
        /* if char is anything other than empty ''
         * return the char wrapped in a span
         */
        return `<span style="color: rgb(${getRandomRGB(255)})">${char}</span>`
      } else {
        // if char is empty, return empty
        return char
      }
    })
  }
  // chars is an array, so we join the elements with an empty string
  coolText.innerHTML = chars.join('');
}

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function getRandomRGB(max) {
  return [getRandomInt(max), getRandomInt(max), getRandomInt(max)]
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <!-- this.id === this element's id -->
  <h1 id="rain2" onm ouseover="changeEveryCharColor(this.id)">
    I should change the color of every character in this tag when mouse hovers over me.
  </h1>
</body>

</html>