JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<h2>1. OK</h2>
<p class= "string">.css('-webkit-box-shadow','0px 20px 0px rgba(0,140,255,1)…');</p>
</div>
<div>
<h2>2. Problem</h2>
<p class= "var">.css('-webkit-box-shadow', usboxshadow)</p>
</div>
<div>
<h2>3. Get '1. OK' CSS & apply to this.</h2>
<p class= "retrieve-string">with $('.string').css('-webkit-box-shadow')</p>
</div>
<div>
<h2>4. Get '2. Problem' CSS & apply to this.</h2>
<p class= "retrieve-var">with $('.var').css('-webkit-box-shadow')</p>
</div>
<div class="console">
<h2>Console log.</h2>
<pre>
<code></code>
</pre>
</div>
CSS
p {
margin: 20px 10px 40px;
padding: 20px;
border: 3px solid orange;
}
h2 {
margin: 0;
font-size: 20px;
}
div {
margin: 10px;
width: 300px;
height: 170px;
float: left;
}
.console {
float: none;
clear: both;
margin: 5px;
width: 650px;
border: 1px dotted red;
}
JavaScript
/* See http://stackoverflow.com/posts/30551648/edit for explanations. */
/* ORIGINAL SHIT */
$('.string').css('-webkit-box-shadow','0px 20px 0px rgba(0,140,255,1), 0px 20px 25px rgba(0,0,0,.7)');
var oneHeight = Math.ceil(0.012*window.innerHeight).toString()+"px";
var usboxshadow="0px "+oneHeight+" 0px rgba(0,140,255,1), 0px "+oneHeight+" 25px rgba(0,0,0,.7)";
$('.var').css('-webkit-box-shadow',usboxshadow);
/* GET 1ST BOX SHADOW & APPLY TO 3RD */
var retrieveStringClassBoxShadow = $('.string').css('-webkit-box-shadow');
$('.retrieve-string').css('-webkit-box-shadow',retrieveStringClassBoxShadow);
/* GET 2ND BOX SHADOW & APPLY TO 4TH */
var retrieveVarClassBoxShadow = $('.var').css('-webkit-box-shadow');
$('.retrieve-var').css('-webkit-box-shadow', retrieveVarClassBoxShadow);
/* CONSOLE LOG + DISPLAYED IN BROWSER */
console.log(usboxshadow);
console.log(retrieveStringClassBoxShadow);
console.log(retrieveVarClassBoxShadow);
$('div:last-of-type code').html(
'2. (problem) usboxshadow: ' + usboxshadow + '\n\n' +
'3. (ok) retrieveStringClassBoxShadow: ' + retrieveStringClassBoxShadow + '\n\n' +
'4. (ok) retrieveVarClassBoxShadow: ' + retrieveVarClassBoxShadow + '\n\n' +oneHeight
);