更改字母間距和字間距與jQuery

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

});

和它的工作原理爲行高而不是字母或字間距。有誰知道爲什麼會這樣？提前致謝！

來源

2016-05-09 Joie

哪裏是你的單位？你在用嗎？ PX？％？ – maiorano84

你必須指定某種單位。 'px'，'pt'，'em'，'rem'等 – naomik

我想你的代碼，你只需要在你的JQuery code.I定義單位試圖通過給予代碼你改變這種方式後，它適用於我。

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

});

通過附加px與它的數字它完美的工作對我來說。

請讓我知道這是否對你有幫助。

感謝

來源

2016-05-09 03:59:15 Codec

它完美無缺！謝謝！ – Joie

jQuery CSS需要一個對象。你可能需要在你的輸入法輸入是這樣的：

{ "font-weight": "bold" }

然後用$(el).css(JSON.parse(wordSpace))

來源

2016-05-09 03:48:59

必須爲字母間距定義有效值：正常，長度，初始，繼承等和數值後綴或追加「PX」或輸入值

來源

2016-05-09 04:02:03

更改字母間距和字間距與jQuery

回答

相關問題