Dynamisch erhöhen Kreis in Vanille Javascript

Ich versuche, einen Kreis immer größer in Vanille javascript/css zu machen. Ich habe nie herausgefunden, wie man den Kreis von etwa 30px dynamisch vergrößert. Ich habe herausgefunden, wie man nach einem Klick 500px macht, aber ich bekomme die anfängliche Größe nicht. Vielleicht ist es in Vanille JS nicht möglich. Jede Hilfe wäre willkommen.Dynamisch erhöhen Kreis in Vanille Javascript

Unten ist der Code, den ich zu implementieren begonnen: diese

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

Quelle

2016-04-15 ziKmouT

Ich bin nicht sicher, ich verstehe dich. Die anfängliche Größe wird in CSS (in Ihrem Code) – ochi

@ochi der Kreis muss um 20px jedes Mal, wenn ich auf es klicken, so die ursprüngliche Anfangsgröße ist 200px, aber die nächste Anfangsgröße wäre 220px – ziKmouT

Gotcha! Ich habe eine Antwort geschrieben – ochi

Wenn Sie den Kreis wachsen wollen, verwenden Sie die divbal.offsetWidth und 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>

Quelle

2016-04-15 07:09:22 ochi

Versuchen

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

Arbeits Geige hier https://jsfiddle.net/o0s5b3pe/

Quelle

2016-04-15 07:06:53

Es funktioniert einfach perfekt, danke! – ziKmouT

prüfen jsfiddle out 0

Ihr Code wird nicht funktionieren, weil Sie versuchen, Elemente Stil Attribut zu lesen. Es hat keinen. Sie haben Anfangsgrößen in CSS-Regeln definiert. Das ist anders. Auch kannst du einfach nicht += zu den Größen, weil es am Ende eine Zeichenfolge mit px zurückgibt. Sie können parseInt() verwenden, um in eine Zahl zu konvertieren, und dann rechnen Sie damit.

Quelle

2016-04-15 07:07:08 Wish

Dynamisch erhöhen Kreis in Vanille Javascript

Antwort

Verwandte Themen