圆圈大小应如何根据使用 javascript/css 的输入动态增加或减少 [关闭]答案

【问题标题】：How the circle size should get increase or decrease dynamically based on the input using javascript/css [closed]圆圈大小应如何根据使用 javascript/css 的输入动态增加或减少 [关闭]
【发布时间】：2019-08-08 12:00:56
【问题描述】：

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

谁能帮帮我。？！

TIA

【问题讨论】：

请分享您的尝试。

标签： javascript html css svg

【解决方案1】：

这里有一些东西可以帮助您入门。它使用custom property 并在您键入时进行调整。我通过CSS 过渡使其在增长/收缩时看起来更酷。

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">

jsFiddle

【讨论】：

谢谢安迪霍夫曼，让我试试这个。实际上，我得到了 % 作为输入，我需要根据应该调整圆的大小来计算。
@Purushoth 我想你可以从这里拿东西。不过，如果这对您有所帮助，请将我的答案标记为选定答案。
嗨 Andy Hoffman 我尝试使用以下示例代码 html：
脚本：setCircleStyle(value) { let我的风格；常量 cssValue = 值 + 'px'; myStyles = { '--circle-size': cssValue };返回我的样式； } css: .centerCircle{ margin-right: 1em;边界半径：50%；宽度: var(--circle-size, 40px); height: var(--circle-size, 40px);位置：相对；背景颜色：#01bab9; } 使用上面的代码样式没有得到追加。
@Purushoth 通过阅读评论中的代码很难帮助您。我建议使用完整的代码创建一个新问题，显示您尝试过的所有内容。这将使您的问题有最好的机会得到一个好的、完整的答案。
这就够了。非常感谢您花时间帮助我。