ändern Buchstaben- und Wortabstand mit jQuery

Question

Ich habe den folgenden Code den Textstil in einem Textfeld zu ändern:

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); 

}); 

und es funktioniert für die Zeilenhöhe, aber nicht für den Buchstaben- oder Wortabstand. Weiß jemand, warum das sein könnte? Danke im Voraus!

Answer 1

Ich habe versucht, den Code, die Sie gerade die Einheiten in Ihrem JQuery code.I versucht, den Code gegeben definieren müssen durch: Sie können so etwas wie dies in Ihrer Eingabe eingeben müssen Du arbeitest für mich, nachdem ich diesen Weg geändert habe.

$("#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"); 

}); 

Durch Anhängen px mit den Nummern funktionierte es perfekt für mich.

Bitte lassen Sie mich wissen, wenn dies für Sie hilfreich ist.

Dank

Answer 2

jQuery css erwartet ein Objekt.

{ "font-weight": "bold" } 

und dann $(el).css(JSON.parse(wordSpace)) verwenden

Answer 3

Sie müssen gültige Werte für letterSpacing definieren: normal, Länge, initiale, erben, usw. und für numerische Werte Suffix oder anhängen „px“ in oder auf den Eingangswert