Значения стилей из формы на лету

[bork75]

На странице будет большое количество форм, куда будут вписываться значения, эти значения нужно
на лету передать в стили css.
Пользователь ввел (изменил) значение в поле ширина и блок изменил свою ширину (без перезагрузки), возможно по событию в поле onkeyup

<input name='s_width' id="s_width"  value="">
<input name='s_height' id="s_height" value="">
<input name='s_background' id="s_background" value="">

<div id="block"></div>

что бы идея была понятна:

<script>
    var s_width = document.getElementById('s_width').value;
    var s_height = document.getElementById('s_height').value;
    var s_background = document.getElementById('s_background').value;

onkeyup.input

   document.getElementById('block') = <style> #block {width:s_width; height:s_height; background-color:s_background}  </style>

</script>

 

[Absolute]

На странице будет большое количество форм, куда будут вписываться значения, эти значения нужно
на лету передать в стили css.
Пользователь ввел (изменил) значение в поле ширина и блок изменил свою ширину (без перезагрузки), возможно по событию в поле onkeyup

На jQuery подойдет?

<input class="myclass" name="width" value="100">
<input class="myclass" name="height" value="100">
<input class="myclass" name="background" value="red">

<div id="block"></div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
  var cssEdit = $('.myclass'), cssBlock = $('#block');
  cssEdit.on('keyup', function(){ 
    cssBlock.css(this.name, this.value);
  });
  cssEdit.each(function(){
    cssBlock.css(this.name, this.value);
  });
});
</script>

 

[coder89]

С keyup мне не очень нравится, потому что срабатывает только когда клавиша будет отпущена. Я бы сделал так:
cssEdit.on('input', function(){});