Javascript 如何使用jquery动态更新字体大小？

我想动态更新字体大小，所以我创建了这段代码，但问题是它不起作用

var font_size = 36;
$('#content').on('click', function(){

  $('#editor').css('display', 'block');

  var numbersValue = "<input type=\"number\" id=\"input-fz\" value="+font_size+">";


var currentValue = $(numbersValue).prop('value');
  var eleId = $(numbersValue).prop('id');
     $(eleId).change(function(event) {
      /* Act on the event */
      newValue = $(this).val();
      newvalueFonts = newValue;
      $('h1').css('font-size', newvalueFonts);
    });

$('#result').html(numbersValue)

})

var font\u size=36；
$（'content'）。在（'click'，function（）上{
$（'#editor'）.css（'display'，'block'）；
var numbersValue=“”；
var currentValue=$（numbersValue）.prop（'value'）；
var eleId=$（numbersValue）.prop（'id'）；
$（eleId）.更改（函数（事件）{
/*对事件采取行动*/
newValue=$（this.val（）；
newvalueFonts=newValue；
$（'h1'）.css（'font-size'，newvaluefont）；
});
$（'#result'）.html（numbersValue）
})

---

您的ID选择器错误，您缺少

$（eleId）

应该是

$（'#'+eleId）

另外请注意，您应该将

+'px'

作为

字体大小的单位传递

当您使用
ID
选择器访问元素时，元素不在
DOM
中，请在使用
jQuery
访问元素之前使用
html（）
方法


var font\u size=36；
$（'content'）。在（'click'，function（）上{
$（'#editor'）.css（'display'，'block'）；
var numbersValue=“”；
var currentValue=$（numbersValue）.prop（'value'）；
var eleId=$（numbersValue）.prop（'id'）；
$（'#result'）.html（numbersValue）；
$（'#'+eleId）.change（函数（事件）{
var newValue=$（this.val（）；
$（'h1'）.css（'font-size'，newValue+'px'）；
});
});

这里有些内容
您的选择器错误。它应该是
$（'#'+eleId）
，而不是
$（eleId）
。您还必须在字体大小之后添加
px
，如
$（'h1'）.css（'font-size'，newvalueFonts+'px'）
。已更新您的脚本


var font\u size=36；
$（'content'）。在（'click'，function（）上{
$（'#editor'）.css（'display'，'block'）；
var numbersValue=“”；
$（'#result'）.html（numbersValue）；
var currentValue=$（numbersValue）.prop（'value'）；
var eleId=$（numbersValue）.prop（'id'）；
$（'#'+eleId）.change（函数（事件）{//在此处修改
/*对事件采取行动*/
newValue=$（this.val（）；
newvalueFonts=newValue；
$（'h1'）.css（'font-size'，newvaluefont+'px'）；//在此处修改
});
});

这里有些内容
可能需要三个更改

使用
#
作为id选择器
将事件从主体委托给输入元素
添加一个类似于
px
的单位作为字体大小单位

var font\u size=36；
$（'content'）。在（'click'，function（）上{
$（'#editor'）.css（'display'，'block'）；
var numbersValue=“”；
var currentValue=$（numbersValue）.prop（'value'）；
var eleId=$（numbersValue）.prop（'id'）；
//实施要点1,2
$（'body'）。on（'change'，'#'+eleId，函数（事件）{
/*对事件采取行动*/
newValue=$（this.val（）；
newvalueFonts=newValue；
//实施要点3
$（'h1'）.css（'font-size'，newvaluefont+'px'）；
});
$（'#result'）.html（numbersValue）
})

这里有一些内容
&如果可能，您可以切换出模板化元素

<h1 id="content">
  Some Content Here
</h1>

<div id="editor" style="display:none">
    <input type="number" id="input-fz">
</div>

<script>
var font_size = 36;
$('#content').on('click', function(){

    $('#editor').css('display', 'block');
    $('#input-fz').val(font_size);

    $('#input-fz').change(function(event) {
      /* Act on the event */
      newValue = $(this).val().toString()+'px';
      $('h1').css('font-size', newValue);
    });

});
</script>


这里有一些内容
var font_size=36；
$（'content'）。在（'click'，function（）上{
$（'#editor'）.css（'display'，'block'）；
$（'#输入fz'）.val（字体大小）；
$（'#输入fz'）。更改（函数（事件）{
/*对事件采取行动*/
newValue=$（this.val（）.toString（）+'px'；
$（'h1'）.css（'font-size'，newValue）；
});
});
用匹配行替换现有代码

 $('#'+eleId).change(function(event) {
  /* Act on the event */
  newValue = $(this).val();
  newvalueFonts = newValue;
 // alert(newvalueFonts);
  $('h1').css('font-size', newvalueFonts+'px');

既然您没有提到选择器，并且必须添加字体大小为像素的px，那么除了要嵌入双引号的一个字符串之外，为什么要对所有字符串文本使用单引号，除了要嵌入双引号的一个字符串，因此，需要进行本可以避免的转义吗？有一个问题，就是当我从number类型的数字递增器或递减器中移除光标时，它有时会起作用。我如何解决它。有一个问题，那就是当我从number类型的数字递增器或递减器中移除光标时，它有时会起作用。如何解决这个问题这里有一个问题，就是当我从输入字段中移除光标时，它有时会工作，并且它的递增或递减不是平滑的。我该怎么解决呢？因为DOM更新需要一些时间。虽然值已更新，但在DOM中仍未重新选择。在这种情况下，可以使用setTimeout。