Change font color Javascript/HTML/Jquery

Asked

Viewed 3,669 times

0

I am developing an application in HTML/Javascript/Jquery and would like to know how I change the color of TEXTAREA FONT by clicking the button...

Someone has an idea?

<html>
<head>

    <!-- <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> --> 
    </head>

<body>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- add bootstrap css CDN -->
<link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- add Jquery CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- add Bootstrap CDN -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <!-- library draggable -->


  <h1><center>Página</center></h1> <!-- Title Page -->
  <hr/>
  <!--
  O código abaixo é apenas uma template
  deve ser colocado fora do formulário
  -->
  <div id="template">
    <button type="button" id="btnCaixaAzul" name="item" class="pular"> </button>
    <button type="button" id="btnCaixaBranco" name="item" class="pular"> </button>
    <button type="button" id="btnCaixaVerde" name="item" class="pular"> </button>
    <button type="button" id="btnCaixaAmarela" name="item" class="pular"> </button>
    <button type="button" id="btnCaixaVermelho" name="item" class="pular"> </button>
    <button type="button" id="btnCaixaPreta" name="item" class="pular"> </button>
    <button type="button" id="btnAumentarFonte" class="pular">↑</button>
    <button type="button" id="btnDiminuirFonte" class="pular">↓</button>
    <button type="button" id="btnCorText" name="item" class="pular"> COR </button>
    <textarea id="0" type="textarea" name="item" class="caixa_descer"></textarea>
  </div>
  <!-- Fim do template -->
  
  <form name="input" method="get" id="mover">
    <div class="ui-input-text">      
      <div data-role="navbar">
        <button type="button" class="button" id="btnAddCaixaTexto">ADICIONAR CAIXAS DE TEXTO</button><br><br> <!-- Create add button -->
        <!-- <button onclick="info();">i</button> <br><br> -->
      </div>
    </div>
  </form>


  <form name="input" method="get">
    <div class="ui-input-text">      
      <div data-role="navbar">
        <button type="button" class="btnsave">SALVAR</button><br><br> <!-- Create save button -->
      </div>
    </div>
  </form>


  <div class="mover">
    <br>
    <button onclick="mover();">Click</button>
  </div>
    <script type="text/javascript">
        $(document).ready(function(){
  var _clone_index = 0;
  $("#btnAddCaixaTexto").on('click', function(){
    // Vamos usar um número de índice exclusivo para cada nova instância do item clonado
    _clone_index++;
    // Verifica a quantidade de caixa já adicionada
    if (_clone_index <= 10) {
      $(this).parent().parent().after($("#template").clone().attr("id","_clone_" + _clone_index));
      // Tornar o clone visível alterando CSS
      $("#_clone_" + _clone_index).css("display","inline");
      // Altera o atributo id da tag textarea
      $("#_clone_" + _clone_index + " textarea").attr('id', _clone_index);
      
      // Método para alterar o fundo da textarea
      $("#_clone_" + _clone_index).on('click', "#btnCaixaAzul", function(){
        // Altera o fundo da textarea para Azul
        $(this).parent().find("textarea").css({"background": "blue"});
      });
      
      // Método para alterar o fundo da textarea
      $("#_clone_" + _clone_index).on('click', "#btnCaixaBranco", function(){
        // Altera o fundo da textarea para Branco
        $(this).parent().find("textarea").css({"background": "white"});
      });

      $("#_clone_" + _clone_index).on('click', "#btnCaixaVerde", function(){
        // Altera o fundo da textarea para Verde
        $(this).parent().find("textarea").css({"background": "green"});
      });


      $("#_clone_" + _clone_index).on('click', "#btnCaixaAmarela", function(){
        // Altera o fundo da textarea para Amarelo
        $(this).parent().find("textarea").css({"background": "yellow"});
      });


      $("#_clone_" + _clone_index).on('click', "#btnCaixaVermelho", function(){
        // Altera o fundo da textarea para Vermelho
        $(this).parent().find("textarea").css({"background": "red"});
      });


      $("#_clone_" + _clone_index).on('click', "#btnCaixaPreta", function(){
        // Altera o fundo da textarea para Preto
        $(this).parent().find("textarea").css({"background": "black"});
      });

      
      // Método para Aumentar a fonte da textarea
      $("#_clone_" + _clone_index).on('click', "#btnAumentarFonte", function(){
        // Armazena o tamanho atual da fonte
        var tamanhoAtual = parseFloat($(this).parent().find("textarea").css("font-size"));
        // Incrementa + 1 no valor atual, e aplica o novo tamanho
        $(this).parent().find("textarea").css({"font-size": tamanhoAtual+1});
      });

      // Método para Diminuir a fonte da textarea
      $("#_clone_" + _clone_index).on('click', "#btnDiminuirFonte", function(){
        // Armazena o tamanho atual da fonte
        var tamanhoAtual = parseFloat($(this).parent().find("textarea").css("font-size"));
        // Incrementa - 1 no valor atual, e aplica o novo tamanho
        $(this).parent().find("textarea").css({"font-size": tamanhoAtual-1});
      });

    } else {
      // Caso for maior que 10, exibe a mensagem
      // e desabilita o botão
      alert("ATÉ 10 CAIXAS DE TEXTO");
      $(this).prop("disabled", true); // Desabilita o botão #btnAddCaixaTexto
    }
    mover();
  });
  
  function mover(){
    $('#mover').draggable(); // add draggable library
  };
});
    </script>
</body>
</html>

1 answer

1


Like you used to background:

 .css({"background": "COR DE FUNDO"});

Can use for font color:

 .css({"color": "COR DAS LETRAS"});

If you need to change both at once do:

 .css({ "background": "COR DE FUNDO", "color": "COR DAS LETRAS" });

Browser other questions tagged

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