Question

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

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

});

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

Answer 1

jQuery css需要一个对象。你可能需要在输入中输入这样的内容：

{ "font-weight": "bold" }

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

Answer 2

我尝试了你的代码，你只需要在你的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附加数字，这对我来说非常合适。

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

由于

Answer 3

您必须为letterspacing定义有效值：normal，length，initial，inherit等，对于数值后缀或在输入值中添加“px”

用jQuery改变字母和单词间距

3 个答案: