使用 Javascript Loop 实时/在屏幕上更改 DHTML 元素大小

Question

我想创建一个按钮，它的尺寸会缩小，直到小到看不见（然后从中心点向外扩展）。按钮是一个圆圈，我的问题是。JavaScript，第一个函数成功调用了发生变化的函数元素的大小。

//script menu js

function changeMenu(){
  const parent1 = document.querySelector('.menuSelection');
  activeMenu = parent1.classList.contains('visible');
  hiddenMenu = parent1.classList.contains('hidden');
  buttonClicked();
  if(hiddenMenu){
    parent1.classList.remove('hidden');
    parent1.classList.add('visible');
  }
  else{
    parent1.classList.remove('visible');
    parent1.classList.add('hidden');
  }
}
function buttonClicked(){
  const button1= document.getElementById('dropdownButton');
  console.log('Button Clicked Start');
  for (let index = 0; index < 5; index++) {
    button1.style.width -= "10px";
    button1.style.height -= '10px';
    console.log('Loop');
  }
  console.log('Button Function End.');
}
console.log('Outside')

const button = document.getElementById('dropdownButton');
button.addEventListener('click',changeMenu)

当我点击圆形按钮时，我在尝试更改其大小时遇到问题。我希望按钮每个循环缩小 10px，我有一个 for 循环。好吧，问题是按钮不改变大小。 （上限是为了帮助需要 tdlr 的人）该函数确实会输出 DEBUG 语句，以便该函数完全运行。前端没有实际变化（我相信我正确使用了这个术语。）

我做了什么？

编写函数何时开始、结束以及函数内循环何时运行的调试语句。所有语句都输出到控制台。我预计按钮会向内收缩，因为该函数按 1:1 比例缩小，从而保持圆形形状。

这里是我的 github ringofdeath.github.io 页面链接，您可以从那里和提供的图片中检查代码。需要更改大小的按钮的 CSS。

#dropdownButton{
    
    height: auto;
    
    border: solid;
    border-color:rgb(50, 107, 107);
    background-color: rgb(50, 107, 107);
    border-radius:50%;
    width: 40px;
    height: 40px;
    display:inline-block;

    margin-left: 10px;
    margin-bottom: 5px;
}

（编辑）我忘记包括这一点，也许问题是因为我只能根据我的知识假设，如果没有反应，你就无法对实时元素进行重大更改，但也许我错误地阅读了反应主页。 REACT 不是该程序的一部分，它只是 DHTML。

Answer 1

您遇到了几个问题。

1. DHTML 这个词在 2024 年的使用已经过时了
2. 您没有在循环中引入延迟
3. 您尝试过

   width -= "10px"

   ，但没有成功。

我认为这种事情最好用 CSS3 来完成，CSS3 具有

transition

属性和

transform: scale

都应该产生一些效果。

//script menu js
const button = document.getElementById('dropdownButton');

function buttonClicked() {
  console.log('Button Clicked Start');
  button.classList.add("shrink");
  

  setTimeout(function() {
    button.classList.remove("shrink");

  }, 1500)

}
button.addEventListener('click', buttonClicked)

.button {
  height: auto;
  border: solid;
  border-color: rgb(50, 107, 107);
  background-color: rgb(50, 107, 107);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 5px;
  transition: 1500ms;
}

.button.shrink {
  transform: scale(0)
}

<div id="dropdownButton" class="button"></div>