[英]Change letter and word spacing with jQuery
I have the following code to change the text style in a textarea: 我有以下代码来更改textarea中的文本样式:
HTML 的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) 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);
});
and it works for the line-height but not for the letter or word spacing. 它适用于行高,但不适用于字母或单词的间距。 Does anyone know why might this be?
有谁知道为什么会这样吗? Thanks in advance!
提前致谢!
jQuery css expects an object. jQuery css需要一个对象。 you may need to enter something like this in your input:
您可能需要在输入中输入以下内容:
{ "font-weight": "bold" }
and then use $(el).css(JSON.parse(wordSpace))
然后使用
$(el).css(JSON.parse(wordSpace))
I tried your code ,you just need to define the units in your JQuery code.I tried the code given by you it works for me after changing this way. 我尝试了您的代码,您只需要在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+"px");
$("#text").css("word-spacing", wordSpace+"px");
$("#text").css("line-height", lineSpace+"px");
});
By appending px
with the numbers it worked perfectly for me. 通过在
px
后面加上数字,它对我来说效果很好。
Please let me know if this is helpful for you. 如果这对您有帮助,请告诉我。
Thanks 谢谢
您必须为字母间距定义有效值:普通,长度,首字母,继承等,并为数字值后缀或在输入值中或输入值后附加“ px”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.