Tengo el siguiente código para cambiar el estilo de texto en un área de texto:

Html

    <!--text area-->

      <textarea placeholder="paste text here" size = "12" id="text" rows="5" cols="90" ></textarea>

      <!--text alter inputs-->

      <br/><br/>
letter spacing: <input type="number" placeholder="#" id="letterSpace"/>

<br/><br/>
word spacing: <input type="number" placeholder="#" id="wordSpace"/>

      <br/><br/>
line spacing: <input type="number" placeholder="#" id="lineSpace"/>

    <!--apply changes button-->

      <br/><br/><button id="go">update text!</button>

JAVASCRIPT (jQuery)

$("#go").click(function(){

   //SET VARS

  var letterSpace = $("#letterSpace").val();

  var wordSpace = $("#wordSpace").val();

  var lineSpace = $("#lineSpace").val();

  //UPDATE TEXT

   $("#text").css("letter-spacing", letterSpace);
   $("#text").css("word-spacing", wordSpace);
   $("#text").css("line-height", lineSpace);

});

Y funciona para el alto de línea pero no para el espaciado entre letras o palabras. ¿Alguien sabe por qué podría ser esto? ¡Gracias por adelantado!

0
Joie 9 may. 2016 a las 06:44

3 respuestas

La mejor respuesta

Probé su código, solo necesita definir las unidades en su código JQuery. Probé el código que me dio después de cambiar de esta manera.

 $("#go").click(function(){

   //SET VARS

  var letterSpace = $("#letterSpace").val();

  var wordSpace = $("#wordSpace").val();

  var lineSpace = $("#lineSpace").val();

  //UPDATE TEXT

   $("#text").css("letter-spacing", letterSpace+"px");
   $("#text").css("word-spacing", wordSpace+"px");
   $("#text").css("line-height", lineSpace+"px");

});

Al agregar px con los números, funcionó perfectamente para mí.

Avíseme si esto es útil para usted.

Gracias

0
Codec 9 may. 2016 a las 03:59

JQuery css espera un objeto. Es posible que deba ingresar algo como esto en su entrada:

{ "font-weight": "bold" }

Y luego usa $(el).css(JSON.parse(wordSpace))

0
William B 9 may. 2016 a las 03:48

Debe definir valores válidos para el espacio entre letras: normal, longitud, inicial, heredar, etc. y para los valores numéricos con sufijo o anexar "px" en el valor de entrada

0
Arun Sharma 9 may. 2016 a las 04:02