JSFiddle - React, Tailwind, and code Playground

by Gregory Guidero

HTML

<div id="test" style="width:200px;height:200px;background:#000;color:#fff;">Test</div>

CSS

.testclass
{
    font-size:32px;
    font-weight:bold;
    cursor:pointer;
}

JavaScript

/* NEED TO SHIM IT? */

if(typeof window.Element == 'undefined')
{
    window["Element"] = (function()
    {
        var obj = {};
        /* add other things to Elements here */
        obj.prototype = {};
        return obj;                     
    })();
    
    var __getElementById = document.getElementById;
    var __createElement = document.createElement;
    document.getElementById = function(id)
    {
         var element = __getElementById(id);
        for(var prop in Element)
        {
            element[prop] = Element[prop];
        }
        for(var proto in Element.prototype)
        {
            element[proto] = Element.prototype[proto];
        }
   }
   document.createElement = function(tag)
   {
        var element =  __createElement(tag);
   }
}
/* END of shim */

    /* the actual method */

    Element.prototype.setAttributes = function(attr)
    {
        var recursiveSet = function(at,set)
        {
            for(var prop in at)
            {
            /* check if object and not a dom node or array */
                if(typeof at[prop] == 'object' && at[prop].dataset == null && at[prop][0] == null)
                {
                    recursiveSet(at[prop],set[prop]);
                }
                else
                {
                    set[prop] = at[prop];
                }
            }
        }
        recursiveSet(attr,this);
    }
    var test = document.getElementById("test");

/* test use */
test.setAttributes({
    style:
    {
        background:"#fff",        
        color:"#000",
        width:"100px"
    },
    className:"testclass",
    onclick: function(e){alert("the test div has been clicked and its width is: "+this.style.width);}
});