JSFiddle - React, Tailwind, and code Playground
HTML
<div id="box"></div>
CSS
body {
height: 2000px;
}
#box {
width: 200px;
height: 200px;
top: 100px;
left: 100px;
background: #faeade;
position: absolute;
}
JavaScript
var rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
ralpha = /alpha\([^)]*\)/,
ropacity = /opacity=([^)]*)/,
rfloat = /float/i,
rdashAlpha = /-([a-z])/ig,
rupper = /([A-Z])/g,
rnumpx = /^-?\d+(?:px)?$/i,
rnum = /^-?\d/,
cssShow = { position: "absolute", visibility: "hidden", display:"block" },
cssWidth = [ "Left", "Right" ],
cssHeight = [ "Top", "Bottom" ],
// cache check for defaultView.getComputedStyle
getComputedStyle = document.defaultView && document.defaultView.getComputedStyle,
// normalize float css property
styleFloat = jQuery.support.cssFloat ? "cssFloat" : "styleFloat",
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
};
jQuery.curCSS= function( elem, name, force ) {
var ret, style = elem.style, filter;
// IE uses filters for opacity
if ( !jQuery.support.opacity && name === "opacity" && elem.currentStyle ) {
ret = ropacity.test(elem.currentStyle.filter || "") ?
(parseFloat(RegExp.$1) / 100) + "" :
"";
return ret === "" ?
"1" :
ret;
}
// Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) {
name = styleFloat;
}
if ( !force && style && style[ name ] ) {
ret = style[ name ];
} else if ( getComputedStyle ) {
// Only "float" is needed here
if ( rfloat.test( name ) ) {
name = "float";
}
name = name.replace( rupper, "-$1" ).toLowerCase();
var defaultView = elem.ownerDocument.defaultView;
if ( !defaultView ) {
return null;
}
var computedStyle = defaultView.getComputedStyle( elem, null );
if ( computedStyle ) {
ret = computedStyle.getPropertyValue( name );
...