Question

我开始自我介绍HTML，CSS和JS。我正在尝试根据输入字段来确定框的大小。具体来说，我有2个输入字段（高度和宽度）。根据那些字段中插入的值，应显示Div-Box，并根据输入字段中的值更改大小。我相信这可以通过JS来完成，作为初学者，我只是不知道该怎么做。

.boxA {
  width= ID=('width');
  height= ID=('height');
  border: 1px solid black;
}

<label for="height">Height</label>
  <input type="number" min="1" max="100" id="height" value="50"    step=".1">
<label for="width">Width</label>
  <input type="number" min="1" max="200" id="width" value="100" step=".1"></p>
  
<div class=boxA>Box A<div>

我知道代码不会那样工作，只是试图显示我要实现的目标。有人知道如何使这项工作吗？

Answer 1

盒子的尺寸是通过其样式（即CSS）设置的。

所以您需要

听听您输入中值的变化
更新框的样式属性，特别是宽度和高度属性

通过element.style.width和element.style.height属性来更改尺寸。这些属性是字符串，需要一个单位，因此您需要添加f。 “ px”。

您可以通过将监听器（addEventListener）绑定到input event来监听值的变化。

const boxA = document.getElementById("boxA");

document.getElementById("height").addEventListener("input", e => {
  boxA.style.height = e.target.value + "px";
});
document.getElementById("width").addEventListener("input", e => {
  boxA.style.width = e.target.value + "px";
});

.boxA {
  border: 1px solid black;
}

<label for="height">Height</label>
<input type="number" min="1" max="100" id="height" value="50" step=".1">
<label for="width">Width</label>
<input type="number" min="1" max="200" id="width" value="100" step=".1"></p>

<div id="boxA" class=boxA>Box A
  <div>

盒子大小取决于输入

1 个答案: