在普通javascript中动态增加循环

Dynamically increase circle in vanilla javascript

本文关键字：动态 增加 循环 javascript      更新时间：2023-09-26

我正试图用香草javascript/css做一个越来越大的圆圈。我从来没有发现如何动态地使圆圈增加，比如说30像素。我想好了如何在点击后使其达到500px，但我无法获得初始大小。也许这在香草JS中是不可能的。欢迎任何帮助。

下面是我开始实现的代码：

<HTML>
<HEAD>
    <title>Ball00n p0p</title>
    <style type="text/css">
    #balloon {
        background-color: #FF0000;
        border-radius : 50%;
        width:200px;
        height:200px;
    }
    </style>
</HEAD>
<BODY>
    <script langage="Javascript">
    function func_chg_size () {
    var divbal = document.getElementById("balloon");

    // var w = divbal.style.width;
    // var h = divbal.style.height;
    // console.log('w = ' + divbal.style.width);
    // console.log('h = ' + divbal.style.height);
    //
    // w += 200;
    // h += 200;
    divbal.style.width += 300 + "px";
    divbal.style.height += 300 + "px";
    }
    </script>
<div onclick="func_chg_size();" id="balloon"></div>
<BR />
<BR />
<!-- <div id="balloon"></div> -->
</BODY>

如果要扩大圆圈，请使用divbal.offsetWidth和divbal.offsetHeight

function func_chg_size() {
  var  divbal = document.getElementById("balloon");
  
  
  divbal.style.width = divbal.offsetWidth + 20 + "px";
  divbal.style.height = divbal.offsetHeight + 20 + "px";
}
function init() {
  var divbal = document.getElementById("balloon");
  divbal.style.width += 30 + "px";
  divbal.style.height += 30 + "px";
}
init();
#balloon {
  background-color: #FF0000;
  border-radius: 50%;
}
<div onclick="func_chg_size();" id="balloon"></div>

试试这个

 <script langage="Javascript">
    function func_chg_size () {
    var divbal = document.getElementById("balloon");
    divbal.style.width = divbal.offsetWidth + 30 + "px";
    divbal.style.height = divbal.offsetHeight + 30 + "px";
    }
    </script>
<div onclick="func_chg_size();" id="balloon"></div>

在这里工作https://jsfiddle.net/o0s5b3pe/

检查jsfiddlehttps://jsfiddle.net/3zxnoLno/

您的代码无法工作，因为您正在尝试读取元素样式属性。它没有。您已经在css规则中定义了初始大小。这是不同的。此外，您不能简单地将+=设置为大小，因为它返回一个末尾为px的字符串。您可以使用parseInt()将其转换为数字，然后对其进行数学运算。

相关文章：