Question

以下我认为我会这样做，但这不起作用：

<script type="text/Javascript">
  var input = document.getElementById('userinput'),
  width = document.getElementById('thing');
  input.onkeyup = function() {
  width.innerHTML = input.value}
</script>


<input id="userinput">
<div id="thing">You can decide the width of this div>

所以用户输入50％的东西，div的宽度为50％。

由于

Answer 1

应该是

width.style.width = input.value;

另请注意，输入可以通过键盘以外的其他方式进行修改，例如：用鼠标。所以最好听一下input事件。

var input = document.getElementById('userinput'),
    width = document.getElementById('thing');
input.oninput = function() {
  width.style.width = input.value;
};

#thing {
  background: yellow;
}

<input id="userinput">
<div id="thing">You can decide the width of this div</div>

用户如何使用Javascript立即更改div的宽度？

1 个答案: