Динамически увеличивать круг в ваниле 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 круг должен увеличиваться на 20 пикселей каждый раз, когда я нажимаю на него, чтобы начальный начальный размер составлял 200 пикселей, но следующий начальный размер был бы 220px – ziKmouT

gotcha! Я отправил ответ – 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

ответ

Смежные вопросы