使用jQuery更改字母和单词间距

Change letter and word spacing with jQuery

本文关键字：单词间 jQuery 使用      更新时间：2023-09-26

我有以下代码来更改文本区域中的文本样式：

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

它适用于行高度，但不适用于字母或单词间距。有人知道为什么会这样吗？提前感谢！

我试过你的代码，你只需要在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");
});

通过给px加上数字，它对我来说非常有效

如果这对你有帮助，请告诉我。

感谢

jQuery css需要一个对象。您可能需要在输入中输入类似的内容： 
{ "font-weight": "bold" }

然后使用$(el).css(JSON.parse(wordSpace))

您必须为letterspacing定义有效值：normal、length、initial、inherit等，并为数值在输入值中后缀或附加"px"

相关文章：