JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<img id="img1" src="http://www.androidnoodles.com/wp-content/uploads/2010/09/1_google_logo.jpg">
<div id="div1">abcdefg</div>

<button onclick="changeit()">Change size</button><button onclick="checkit()">check</button>

CSS

#img1{
    width:150px;
    height:100px;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
}
#div1{
    width:200px;
    height:300px;
    background:blue;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
}

JavaScript

var state = [];  //Create a "database"

$(window).load(function() {
    $("*").each(function() {
        var arr = [];
        arr[0] = this
        arr[1] = this.offsetWidth;
        arr[2] = this.offsetHeight;

        state[state.length] = arr     //Store initial size
    });
})

function changeit() {
    $("#img1").width(250);  //Changes the width to test it
    $("#div1").width(400);  //Changes the width to test it
}

function checksize(ele) {
    for (var i = 0; i < state.length; i++) {
        if (state[i][0] == ele) {
            if (state[i][1] == ele.offsetWidth && state[i][2] == ele.offsetHeight) {         //Still the same?
                return false        //Does not change
            } else {
                return true         //Does change
            }
        }
    }
}

function checkit() {
    alert("Image changed size? " + checksize($("#img1")[0]));
    alert("Div changed size? " + checksize($("#div1")[0]));
}