привязать входное значение к стилю другого элемента

Question

У меня есть следующий код

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

как связать с помощью jquery значение #in с #out 'font-size?

Ограничения:

a) вариант из этот кодовый элемент также должен работать:

$(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) когда браузер автозаполняет , вводя значения в поля, значениедолжен измениться ...

Answer 1

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>

Answer 2

Проверьте эту скрипту:

Вам потребуется проверить информацию, прежде чем изменять размер шрифта:

<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/

Answer 3

Вы должны применить свой CSS с помощью функции .css из JQuery, когда событие запускается (здесь 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>

Answer 4

С чистым 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>

Answer 5

Использование .css функции jquery

$('#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>