时间戳

首页 > 解决方案 > 盒子大小取决于输入

javascript - 盒子大小取决于输入

问题描述

我开始自学 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>

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

标签： javascripthtmlcss

解决方案

盒子的尺寸是通过它的样式来设置的，也就是 CSS。

所以你需要

  • 聆听输入中值的变化
  • 更新盒子的样式属性，特别是宽度和高度属性

尺寸通过element.style.width和element.style.height属性进行更改。这些属性是字符串并且需要一个单位，因此您需要添加 fe 'px'。

addEventListener您可以通过将 listener( ) 绑定到输入事件来监听值的变化。

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>

推荐阅读