JSFiddle - React, Tailwind, and code Playground

by jer2

HTML

<div id="myDiv"></div>
<hr>
    <input type="button" value="grow" onClick="changeSize(.2)"/>

CSS

#myDiv {
    height:100px;
    width:200px;
    background-color:#ABCDEF;
    padding:20px;
    margin:10px;
}

JavaScript

var changeSize = function(percentage) {
    var component = document.getElementById('myDiv');
    console.log(component);
    
    var currHeight = component.clientHeight;
    console.log("clientHeight", currHeight);
    console.log("curr style height", component.style.height);
    
    var currWidth = component.clientWidth;
    console.log("clientWidth", currWidth);
    console.log("curr style width", component.style.width);
    
    
    var heightDelta = currHeight * percentage;
    console.log("heightDelta", heightDelta);
    var widthDelta = currWidth * percentage;
    console.log("widthDelta", widthDelta);
    
    
    var newHeight = currHeight + heightDelta;
    console.log("newHeight", newHeight);
    var newWidth = currWidth + widthDelta;
    console.log("newWidth", newWidth);
    
    
    component.style.height = newHeight + 'px';
    component.style.width = newWidth + 'px';
    console.log("old height", currHeight);
    console.log("new height", component.clientHeight);
    console.log("also by style height", component.style.height);
    console.log("old width", currWidth);
    console.log("new width", component.clientWidth);
    console.log("also by style width", component.style.width);
    //console.log("just style", component.style);
}