JSFiddle - React, Tailwind, and code Playground
by arcm111
HTML
<body>
</body>
JavaScript
element = function(tag)
{
var elm = document.createElement(tag), root = this;
this.css = function(a)
{
for (var b in a)
{
if (b == 'hover')
{
root.onMouseOver = function(){ for (var c in a[b]) root.elm.style[c] = a[b][c] };
root.onMouseOut = function(){ for (var d in root.__style) root.elm.style[d] = root.__style[d] };
}
else if (b == 'focus')
{
root.onFocus = function(){ for (var c in a[b]) root.elm.style[c] = a[b][c] };
root.onBlur = function(){ for (var d in root.__style) root.elm.style[d] = root.__style[d] };
}
else
{
root.elm.style[b] = a[b];
root.__style[b] = a[b];
}
}
}
this.set = function(a)
{
for (var b in a) root.elm[b] = a[b];
}
this.append = function()
{
for (var i in arguments)
{
if (arguments[i].__instanceof == 'element') root.elm.appendChild(arguments[i].elm);
else if (arguments[i] instanceof Element) root.elm.appendChild(arguments[i]);
else console.log(arguments[i] + ' is not an element');
}
}
this.removeEventListener = function(e)
{
root['on' + e] = null;
}
var events = ['MouseOver','MouseOut','MouseUp','MouseDown','MouseMove','MouseWheel','DOMMouseScroll','Click','ContextMenu','Focus','Blur','Change'];
events.map(function(e)
{
var name = e.toLowerCase(), val = 'on' + e;
if (name == 'dommousescroll'){ name = e; val = 'onmousewheel' };
elm.addEventListener(name, function(event)
{
if (!event) event = window.event;
var fn = root[val];
if (fn && (fn instanceof Function)) fn.call(root, event);
else return;
}, false);
root['on' + e] = null;
});
var removeListener = function(e)
...