将输入值绑定到另一个元素的样式答案

【问题标题】：bind a input value to a style of another element将输入值绑定到另一个元素的样式
【发布时间】：2019-06-30 08:20:21
【问题描述】：

我有以下代码

<input id="in" value="50px"/>
<div id="out">this is my output</div>

如何使用 jquery 将#in 值绑定到#out 的font-size？

约束：

a) this codepen 的变体也应该可以工作：

$(function() {  
  $("#out").css("fontSize", $("#in").val());

  $("#in").on("input", function(e) {
    $("#out").css("fontSize", $("#in").val());
  });

  $("#in").val("5px"); // should update the font size! 
});

b) 当浏览器自动填充-将值放入框中时，值应该会改变...

【问题讨论】：

使用on('input', fn) 和css()。如果您需要具体帮助，请编辑问题以包含您自己解决此问题的尝试。
(1) 读取输入的值 (2) 设置字体大小[每次输入更改都这样做]
有人能解释一下下注吗？
更新了 OP，添加了约束

标签： javascript jquery html css binding

【解决方案1】：

当事件被触发时，您必须使用来自 JQuery 的 .css 函数应用您的 CSS（此处为 keyup）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="in" value="18px"/>
<div id="out">this is my output</div>
<script>
$('#in').on('keyup', function () {
    $('#out').css({'font-size':$(this).val()});
});
</script>

【讨论】：

【解决方案2】：

使用jquery的.css函数

$('#in').keyup(function() {
  $("#out").css('font-size', $('#in').val()+"px")

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="in" value="18" />
<br><br>
<br>

<div id="out">this is my output</div>

【讨论】：

为什么大家都使用keyup事件？实际上，仅启动应用程序是行不通的

【解决方案3】：

使用纯javascript：

const inp = document.querySelector("#inp");
const out = document.querySelector("#out");

inp.addEventListener("keyup", function(){
  out.style.fontSize = inp.value + "px";
})

<input id="inp" type="text" placeholder="write a value">
<div id="out">this is my output</div>

【讨论】：

【解决方案4】：

检查这个小提琴：

您需要在更改字体大小之前验证信息：

<input id="in" value="18px"/>
<div id="out">this is my output</div>  
$(function() {
    $("#in").on('input',function(e){
    $("#out").css("fontSize", $("#in").val());
  });

});  
https://jsfiddle.net/3vhdfruq/1/

【讨论】：

仅在字段获得焦点并执行输入时才有效
对不起，我没明白。加载时要更改吗？只需调用 "$("#out").css("fontSize", $("#in").val());"加载脚本时...

【解决方案5】：

var inp = document.querySelector("#inp");
var out = document.querySelector("#out");

inp.addEventListener("keyup", function(){
  out.style.fontSize = inp.value + "px";
})

<input id="inp" type="text" value="20">
<div id="out">this is my output</div>

【讨论】：

keyup 依赖