根据使用javascript / css

Question

需要根据输入内容创建2个圆圈，圆圈大小应使用javascript / css动态增加或减少

有人可以帮我这个忙吗？！

TIA

Answer 1

这里有一些可以帮助您入门的东西。它使用custom property并在您键入时进行调整。我进行了const input = document.querySelector('.circle-size'); const circles = document.querySelectorAll('.circle'); input.addEventListener('input', handleInput); function handleInput() { circles.forEach(circle => { circle.style.setProperty('--circle-size', input.value + 'px'); }) }过渡，以使其在生长/收缩时看起来更凉爽。

.circle {
  margin-right: 1em;
  border-radius: 50%;
  width: var(--circle-size, 20px);
  height: var(--circle-size, 20px);  
  background-color: green;
  display: inline-block;
  transition: 0.5s width, 0.5s height;
}

[type=number] {
  display: block;
}

<div class="circle"></div>
<div class="circle"></div>

<input aria-label="set circle size" type="number" class="circle-size" value="20">

{{1}}

jsFiddle