动态增加香草中的圈子javascript

我正在尝试在香草javascript/css中做出更大更大的圆圈。我从来没有发现如何动态地让圈30px增加。我想出了点击后如何使其达到500px，但无法达到初始大小。也许它不可能在香草JS中。任何帮助将受到欢迎。动态增加香草中的圈子javascript

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

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

来源

2016-04-15 ziKmouT

我不知道我理解你。初始大小设置为CSS（在您的代码中） – ochi

@ochi圆圈每次点击它时需要增加20px，因此初始初始大小为200px，但下一个初始大小为220px – ziKmouT

错过！我发布了一个答案 – ochi

如果你想长大了一圈，用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>

来源

2016-04-15 07:09:22 ochi

尝试了这一点这里

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

来源

2016-04-15 07:06:53

它只是完美的工作，谢谢！ – ziKmouT

检查的jsfiddle https://jsfiddle.net/3zxnoLno/

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

来源

2016-04-15 07:07:08 Wish

动态增加香草中的圈子javascript

回答

相关问题