Question

伙计们我有一个文本区域，如果我写了超过5个字母，字体大小将仅针对该元素进行更改。但是当我这样做时，所有元素的大小都会发生变化。那么该怎么做？

$("#button").click(function() {
  var userValue = $('#textarea').val();
  $('#textarea').val('');
 $('#writtings').append('<p>' + userValue + '</p>');
 
  if(userValue.length > 5 ) {
  $("#writtings").parent().css("font-size", 30);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <textarea  id="textarea" placeholder="Write here!"></textarea>    
 <button id="button">Add</button>
 <div id="writtings"></div>

Here also fiddle

Answer 1

将样式直接插入您要附加的p，无需稍后编辑它。

＆＃13;

$("#button").click(function() {
  var userValue = $('#textarea').val();
  $('#textarea').val('');
  if(userValue.length > 5 )
    $('#writtings').append('<p style="font-size:30px">' + userValue + '</p>');
  else
    $('#writtings').append('<p>' + userValue + '</p>');

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <textarea  id="textarea" placeholder="Write here!"></textarea>    
 <button id="button">Add</button>
 <div id="writtings"></div>

＆＃13;

Answer 2

writtings元素的父元素是所有新p标记的父元素。您需要设置单独添加的每个段落的样式。

e.g。

$("#button").click(function() {
  var userValue = $('#textarea').val();
  $('#textarea').val('');
  var newContent = $('<p>' + userValue + '</p>');
 $('#writtings').append(newContent);

  if(userValue.length > 5 ) {
        newContent.css("font-size", 30);
  }
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/4ts5vdsa/2/

Answer 3

如果要修改最新添加的p标签，可以使用最后一个子选择器：

$("#button").click(function() {
  var userValue = $('#textarea').val();
  $('#textarea').val('');
  $('#writtings').append('<p>' + userValue + '</p>');
  
  if(userValue.length > 5 ) {
      $("#writtings p:last-child").css("font-size", 30);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea  id="textarea" placeholder="Write here!"></textarea>    
<button id="button">Add</button>
<div id="writtings"></div>

如何更改附加值的字体大小？

3 个答案: