在javascript中动态增加循环_Javascript

在javascript中动态增加循环

javascript

在javascript中动态增加循环,javascript,Javascript,我试图在香草javascript/css中创建一个越来越大的圆圈。我从来没有发现如何动态地使圆增加，比如说30px。我知道如何在点击后使其达到500px，但我无法获得初始大小。也许这在香草JS中是不可能的。欢迎任何帮助以下是我开始实施的代码： <HTML> <HEAD> <title>Ball00n p0p</title> <style type="text/css"> #balloon {

我试图在香草javascript/css中创建一个越来越大的圆圈。我从来没有发现如何动态地使圆增加，比如说30px。我知道如何在点击后使其达到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>


Ball00n p0p
#气球{
背景色：#FF0000；
边界半径：50%；
宽度：200px；
高度：200px；
}
函数func_chg_size（）{
var divbal=document.getElementById（“气球”）；
//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 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>


函数func_chg_size（）{
var divbal=document.getElementById（“气球”）；
divbal.style.width=divbal.offsetWidth+30+“px”；
divbal.style.height=divbal.offsetHeight+30+“px”；
}

在这里拉小提琴

试试这个

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


函数func_chg_size（）{
var divbal=document.getElementById（“气球”）；
divbal.style.width=divbal.offsetWidth+30+“px”；
divbal.style.height=divbal.offsetHeight+30+“px”；
}

在这里拉小提琴

检查JSFIDLE

您的代码无法工作，因为您正在尝试读取元素样式属性。它没有。您已经在css规则中定义了初始大小。这是不同的。此外，您不能简单地将大小设置为

+=

，因为它返回一个末尾带有

px

的字符串。您可以使用

parseInt（）

将其转换为一个数字，然后进行数学运算。

检查JSFIDLE

您的代码无法工作，因为您正在尝试读取元素样式属性。它没有。您已经在css规则中定义了初始大小。这是不同的。此外，您不能简单地将大小设置为

+=

，因为它返回一个末尾带有

px

的字符串。您可以使用

parseInt（）

将其转换为一个数字，然后对其进行数学运算。

如果要使圆变大，请使用

divbal.offsetWidth

和

divbal.offsetHeight

函数func\u chg\u size（）{
var divbal=document.getElementById（“气球”）；
divbal.style.width=divbal.offsetWidth+20+“px”；
divbal.style.height=divbal.offsetHeight+20+“px”；
}
函数init（）{
var divbal=document.getElementById（“气球”）；
divbal.style.width+=30+“px”；
divbal.style.height+=30+“px”；
}
init（）
#气球{
背景色：#FF0000；
边界半径：50%；
}
如果要增大圆，请使用divbal.offsetWidth
和divbal.offsetHeight


函数func\u chg\u size（）{
var divbal=document.getElementById（“气球”）；
divbal.style.width=divbal.offsetWidth+20+“px”；
divbal.style.height=divbal.offsetHeight+20+“px”；
}
函数init（）{
var divbal=document.getElementById（“气球”）；
divbal.style.width+=30+“px”；
divbal.style.height+=30+“px”；
}
init（）
#气球{
背景色：#FF0000；
边界半径：50%；
}
我不确定我是否理解你的意思。初始大小是在CSS中设置的（在你的代码中）@ochi每次我点击圆圈时，圆圈需要增加20px，所以初始大小是200px，但下一个初始大小是220px，明白了！我贴了一封回信，我不确定我是否理解你的意思。初始大小是在CSS中设置的（在你的代码中）@ochi每次我点击圆圈时，圆圈需要增加20px，所以初始大小是200px，但下一个初始大小是220px，明白了！我贴出了答案