How to change the color of the text ?

Asked

Viewed 4,019 times

0

 <html>
  <head>
   <title>Efeito digitar em página web</title>


      <script type="text/javascript">


       var posicao = 0;
       var mensagem = "Sua mensagem aqui                      ";  //Esse texto

         function rola() {
         document.getElementById("lugar").innerHTML = 
           mensagem.substring(posicao,mensagem,length);
             posicao++;
           if (posicao == mensagem.length) {
                posicao = 0;
               }
           setTimeout("rola()", 130); 
      }


    </script>
     </head>

    <body onload="rola()">
   <div id="lugar"></div> 
  </body>
</html>
javascript html

2 answers

1

You can change the tag directly:

 <div id="lugar" style="color:rgba(255, 0, 0, 0.8);">

Or by Javascript:

document.getElementById("lugar").style.color =rgba(255, 0, 0, 0.8);

You can create random colors just by creating a string rgba(or rgb) and passing to the attribute style.color, randomized rgba code taken of that question follows the code:

<html>

<head>
  <title>Efeito digitar em página web</title>


  <script type="text/javascript">
    var posicao = 0;
    var mensagem = "Sua mensagem aqui                      "; //Esse texto

    function rola() {
      document.getElementById("lugar").innerHTML =
        mensagem.substring(posicao, mensagem, length);
      posicao++;
      document.getElementById("lugar").style.color = random_rgba();
      if (posicao == mensagem.length) {
        posicao = 0;
      }
      setTimeout("rola()", 130);
    }

    function random_rgba() {
      var o = Math.round,
        r = Math.random,
        s = 255;
      return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
    };
  </script>
</head>

<body onload="rola()">
  <div id="lugar"></div>
</body>

</html>

or just one color each call rola():

<html>

<head>
  <title>Efeito digitar em página web</title>


  <script type="text/javascript">
    var posicao = 0;
    var mensagem = "Sua mensagem aqui                      "; //Esse texto



    function rola() {
      document.getElementById("lugar").innerHTML =
        mensagem.substring(posicao, mensagem, length);
      posicao++;
      if (posicao == mensagem.length) {
        posicao = 0;
      }
      setTimeout("rola()", 130);
    }

    function random_rgba() {
      var o = Math.round,
        r = Math.random,
        s = 255;
      return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
    };

    function RandomTextColor() {
      document.getElementById("lugar").style.color = random_rgba();
    }
  </script>
</head>

<body onload="rola(); RandomTextColor()">
  <div id="lugar"></div>
</body>

</html>

`

  • Good, I liked it, but I’d like one color

  • @Emano80 READY, updated

  • @Leonardobonetti would not be less expensive in this situation to add directly in the div without function or something like ?

  • The cost of the random color function is so small , almost null does not change much, just wanted to give a versatility.

  • Now you have more options.

1


I added a color to the div. See if it solves.

       var posicao = 0;
       var mensagem = "Sua mensagem aqui                      ";  //Esse texto

         function rola() {
         document.getElementById("lugar").innerHTML = 
           mensagem.substring(posicao,mensagem,length);
             posicao++;
           if (posicao == mensagem.length) {
                posicao = 0;
               }
           setTimeout("rola()", 130); 
      }
#lugar{
  color: red;
}
    <body onload="rola()">
   <div id="lugar"></div>

  • Solved buddy, thank you

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.