javascript - 如何使用输入类型数字更改字体大小？

Question

上图显示了用户选择他或她喜欢的字体大小的功能(这是一个适合所有年龄段的网站)。然而，对我来说，将其转换为代码说起来容易做起来难。我发现我必须使用以下方法:

<input type="number">

有谁知道如何使用 Javascript 或 jQuery 来实现这样的功能，将字体大小调整为选定的数字吗？

提前非常感谢!

Answer 1

您可以在提交时提取输入的 val() 并使用 .css() 设置字体大小:

JS

$("input[type=submit]").click(function(){
    var fontSize = $("input[type=number]").val();
    $("p").css({"font-size":fontSize+"px"});
});

HTML

<input type="number" placeholder="choose font-size"/>
<input type="submit"/>
<p>Hello</p>

BUTTON EXAMPLE

或

您可以在 keyup 或 keydown 事件上执行此操作(开始输入您的号码):

$("input[type=number]").keyup(function(){
    var fontSize = $(this).val();
    $("p").css({"font-size":fontSize+"px"});    
});

KEYUP EXAMPLE

或

要在单击向上和向下箭头时更改值，可以使用.change()

$("input[type=number]").change(function(){
   var fontSize = $(this).val();
   $("p").css({"font-size":fontSize+"px"}); 
});

CHANGE EXAMPLE