JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<div id='box'>HI </div>

CSS

#box{
    width: 200px;
    height: 200px;
    background: red;
    color: yellow;
    
}

JavaScript

var Box = function (element) {
'use strict';
    this.element = element;

    
    var extBg = function (bg) {
            this.element = element;
            this.element.style.backgroundColor = bg;
            console.log('setBg',this);
            return this;
        }
    
    
    
    return {
        
        setBg: function(bg){ 
            return extBg.call(this,bg);
        },
        
        setColor: function (color) {
            element.style.color = color;
            //console.log('setColor',this);
            return this;
        },

        setHeight: function (height) {
            element.style.height = height;
            //console.log('setHeight',this);
            return this;
        },

        setWidth: function (width) {
            element.style.width = width;
            //console.log('setWidth',this);
            return this;
        },

        save: function () {

            //console.log(element, this);
            return this;
        }
    };
};


var div = document.getElementsByTagName('div')[0];
//console.log(div);

new Box(div).setColor("blue")
    .setWidth('100px')
    .setHeight("50px")
    .setBg("yellowgreen")
    .save();