Move, Increase Size and Change Color of an Object Using JavaScript

Here is an example to move, increase the size and change color of an object using JavaScript.

JavaScript Example to Move Object, Increase Size of an Object and Change Color

In the following example, it will create a rectangular object and three push buttons, one is to move, second is to increase the size, and the third is to change the color.

The Script for the HTML HEAD Part:

<style>
    #square
    {
        position: absolute;
        left: 0;
        top: 100px;
        width: 100px;
        height: 100px;
        border: 1px solid #333;
        background-color: #ffff00;
    }
    div p
    {
        margin: 10px;
    }
</style>
<script>
    function getQueryParam( name ) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
            return null;
        else
            return results[1];
    }
    window.onload=function() {
        // set up button
        document.getElementById("move").onclick=moveSquare;
        document.getElementById("size").onclick=resizeSquare;
        document.getElementById("color").onclick=changeColor;
        var move = getQueryParam("move");
        if (!move) return;
        var size = getQueryParam("size");
        var color = getQueryParam("color");
        // update element
        var square = document.getElementById("square");
        square.style.left=move + "px";
        square.style.height=size + "px";
        square.style.width=size + "px";
        square.style.backgroundColor="#" + color;
        // update data-state values
        document.getElementById("move").setAttribute("data-state",move);
        document.getElementById("size").setAttribute("data-state",size);
        document.getElementById("color").setAttribute("data-state",color);
    }
    function updateURL () {
        var move = document.getElementById("move").getAttribute("data-state");
        var color = document.getElementById("color").getAttribute("data-state");
        var size = document.getElementById("size").getAttribute("data-state");
        var link = document.getElementById("link");
        var path = location.protocol + "//" + location.hostname + location.pathname +
            "?move=" + move + "&size=" + size + "&color=" + color;
        link.innerHTML="<p><a href='" + path + "'>static state link</a></p>";
    }
    function moveSquare() {
        var move = parseInt(document.getElementById("move").getAttribute("data-state"));
        move+=100;
        document.getElementById("square").style.left=move + "px";
        document.getElementById("move").setAttribute("data-state", move);
        updateURL();
    }
    function resizeSquare() {
        var size = parseInt(document.getElementById("size").getAttribute("data-state"));
        size+=50;
        var square = document.getElementById("square");
        square.style.width=size + "px";
        square.style.height=size + "px";
        document.getElementById("size").setAttribute("data-state",size);
        updateURL();
    }
    function changeColor() {
        var color = document.getElementById("color").getAttribute("data-state");
        var hexcolor;
        if (color == "0000ff") {
            hexcolor="ffff00";
        }
        else {
            hexcolor = "0000ff";
        }
        document.getElementById("square").style.backgroundColor="#" + hexcolor;
        document.getElementById("color").setAttribute("data-state",hexcolor);
        updateURL();
    }
</script>

The Script for the HTML BODY part:

<button id="move" data-state="0">Move Square</button>
<button id="size" data-state="100">Increase Square Size</button>
<button id="color" data-state="#ffff00">Change Color</button>
<div id="link"></div>
<div id="square">
<p>This is the square object</p>
</div>

Output

The output would be as shown in the featured image of this article.