バニラのjavascriptで円を動的に増やす

バニラのjavascript/cssで円が大きくなるようにしようとしています。私はどのように動的に円の増加を30pxと言うことができますを発見したことはありません。私はクリック後に500ピクセルにする方法を考えましたが、最初のサイズを取得することはできません。多分バニラ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

に設定されています。クリックするたびに円が20ピクセルずつ増加する必要があるため、最初の初期サイズは200ピクセルですが、次の初期サイズは220ピクセルになります – 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

https://jsfiddle.net/o0s5b3pe/

出典

2016-04-15 07:06:53

を投稿しましたそれはちょうど完全に動作します、ありがとう！ – ziKmouT

チェックjsfiddle これを試してみて、ここで

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

作業フィドル：以下

は、私が始めたコードが実行することです0

要素のスタイル属性を読み込もうとしているため、コードが機能しません。それは1つを持っていません。 CSSルールで初期サイズを定義しました。それは違う。また、末尾にpxの文字列を返すので、サイズには単に+=を使用できません。 parseInt()を使用して数値に変換し、数値で数式を計算することができます。

出典

2016-04-15 07:07:08 Wish

バニラのjavascriptで円を動的に増やす

答えて

関連する問題