<div class="container">
<div class="box a">A
<br>class
<br>box</div>
<div class="box b">B
<br>class
<br>box</div>
<div class="box a">A
<br>class
<br>box</div>
<div class="box c">C
<br>class
<br>box</div>
<div class="box a">A
<br>class
<br>box</div>
</div>
<div class="controls">Class to apply styling:
<select id="classSelect">
<option value=".box">Box (all)</option>
<option value=".a">A</option>
<option value=".b">B</option>
<option value=".c">C</option>
</select>
<button class="resetall" onclick="clearAll()">Reset All</button>
<br>Set Float:
<select onChange="changeStyle(this, 'float')">
<option default value="">Reset</option>
<option value="right">Right</option>
<option value="left">Left</option>
<option value="none">None</option>
</select>
<br>Set Clear:
<select onChange="changeStyle(this, 'clear')">
<option default value="">Reset</option>
<option value="right">Right</option>
<option value="left">Left</option>
<option value="none">None</option>
<option value="both">Both</option>
</select>
<br>Set Display:
<select onChange="changeStyle(this, 'display')">
<option default value="">Reset</option>
<option value="none">None</option>
<option value="block">Block</option>
<option value="inline">Inline</option>
<option value="inline-block">Inline-block</option>
<option value="table">Table</option>
</select>
<br>Set Vertical-align:
<select onChange="changeStyle(this, 'verticalAlign')">
<option default value="">Reset</option>
<option value="top">Top</option>
<option value="middle">Middle</option>
<option value="bottom">Bottom</option>
</select>
<br>Set Transition:
<select onChange="changeStyle(this, 'transition')">
<option default value="">Reset</option>
<option value="all .5s">0.5 sec</option>
<option value="all 1s">1 sec</option>
<option value="all 3s">3 sec</option>
</select>
<br>Set Visibility:
<select onChange="changeStyle(this, 'visibility')">
<option default value="">Reset</option>
<option value="hidden">Hidden</option>
<option value="visible">Visible</option>
</select>
<br>
<hr>Set Position:
<select onChange="changeStyle(this, 'position')">
<option default value="">Reset</option>
<option value="fixed">Fixed</option>
<option value="relative">Relative</option>
<option value="absolute">Absolute</option>
</select>
<br>Set Top:
<input type="range" value="0" min="-100" max="400" onChange="changeStyle(this, 'top', 'px')" />
<button onclick="{changeStyle(this, 'top'); this.previousSibling.value=0;}">Reset</button>
<br>Set Left:
<input type="range" value="0" min="-100" max="400" onChange="changeStyle(this, 'left', 'px')" />
<button onclick="{changeStyle(this, 'left'); this.previousSibling.value=0;}">Reset</button>
<br>
<hr>Set Size:
<input type="range" value="80" min="10" max="160" onChange="{changeStyle(this, 'height', 'px');changeStyle(this, 'width', 'px')}" />
<button onclick="{changeStyle(this, 'height');changeStyle(this, 'width'); this.previousSibling.value=80;}">Reset</button>
<br>Set Height:
<input type="range" value="80" min="10" max="160" onChange="changeStyle(this, 'height', 'px')" />
<button onclick="{changeStyle(this, 'height'); this.previousSibling.value=80;}">Reset</button>
<br>Set Width:
<input type="range" value="80" min="10" max="160" onChange="changeStyle(this, 'width', 'px')" />
<button onclick="{changeStyle(this, 'width'); this.previousSibling.value=80;}">Reset</button>
<br>Set Padding:
<input type="range" value="0" min="0" max="20" onChange="changeStyle(this, 'padding', 'px')" />
<button onclick="{changeStyle(this, 'padding'); this.previousSibling.value=0;}">Reset</button>
<br>Set Margin:
<input type="range" value="0" min="0" max="40" onChange="changeStyle(this, 'margin', 'px')" />
<button onclick="{changeStyle(this, 'margin'); this.previousSibling.value=0;}">Reset</button>
<br> <hr>
Set Background Color:
<select onChange="changeStyle(this, 'backgroundColor')">
<option default value="">Reset</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="fuchsia">Fuchsia</option>
<option value="antiquewhite">Antique White</option>
<option value="black">Black</option>
</select>
<br>Set Opacity:
<input type="range" value="1" min="0" max="1" step=".05" onChange="changeStyle(this, 'opacity')" />
<button onclick="{changeStyle(this, 'opacity'); this.previousSibling.value=1;}">Reset</button>
<br>Set Text Color:
<select onChange="changeStyle(this, 'color')">
<option default value="">Reset</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="fuchsia">Fuchsia</option>
<option value="antiquewhite">Antique White</option>
<option value="black">Black</option>
</select>
<br>Set Font Family:
<select onChange="changeStyle(this, 'fontFamily')">
<option default value="">Reset</option>
<option value="sans-serif">Sans-serif</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="impact">Impact</option>
<option value="cursive">Cursive</option>
</select>
<br>Set Font Size:
<input type="range" value="0" min="7" max="40" onChange="changeStyle(this, 'fontSize', 'px')" />
<button onclick="{changeStyle(this, 'fontSize'); this.previousSibling.value=0;}">Reset</button>
<br>Set Border Color:
<select onChange="changeStyle(this, 'borderColor')">
<option default value="">Reset</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="fuchsia">Fuchsia</option>
<option value="antiquewhite">Antique White</option>
<option value="black">Black</option>
</select>
<br>Set Border Style:
<select onChange="changeStyle(this, 'borderStyle')">
<option default value="">Reset</option>
<option value="dotted">Dotted</option>
<option value="dashed">Dashed</option>
<option value="solid">Solid</option>
</select>
<br>Set Border Width:
<input type="range" value="0" min="0" max="10" onChange="changeStyle(this, 'borderWidth', 'px')" />
<button onclick="{changeStyle(this, 'borderWidth'); this.previousSibling.value=0;}">Reset</button>
<br>Set Border Radius:
<input type="range" value="0" min="0" max="60" onChange="changeStyle(this, 'borderRadius', 'px')" />
<button onclick="{changeStyle(this, 'borderRadius'); this.previousSibling.value=0;}">Reset</button>
<hr>Text Shadow:
<br>Set Shadow Xoffset:
<input id="tsx" type="range" value="0" min="0" max="15" onChange="changeBoxShadow('','text')" />
<br>Set Shadow Yoffset:
<input id="tsy" type="range" value="0" min="0" max="15" onChange="changeBoxShadow('','text')" />
<br>Set Shadow Blur Size:
<input id="tblur" type="range" value="0" min="0" max="15" onChange="changeBoxShadow('','text')" />
<br>Set Shadow Color:
<select id="tcolor" onChange="changeBoxShadow('','text')">
<option default value="">Reset</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="fuchsia">Fuchsia</option>
<option value="antiquewhite">Antique White</option>
<option value="black">Black</option>
</select><br>
<button onclick="{document.getElementById('tsx').value=0; document.getElementById('tsy').value=0; document.getElementById('tblur').value=0;
document.getElementById('tcolor').options[0].selected='selected';
changeBoxShadow('clear','text');}">Reset</button>
<hr>Box Shadow:
<br>Set Shadow Xoffset:
<input id="bsx" type="range" value="0" min="0" max="15" onChange="changeBoxShadow()" />
<br>Set Shadow Yoffset:
<input id="bsy" type="range" value="0" min="0" max="15" onChange="changeBoxShadow()" />
<br>Set Shadow Blur Size:
<input id="bsblur" type="range" value="0" min="0" max="15" onChange="changeBoxShadow()" />
<br>Set Shadow Color:
<select id="bscolor" onChange="changeBoxShadow()">
<option default value="">Reset</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="fuchsia">Fuchsia</option>
<option value="antiquewhite">Antique White</option>
<option value="black">Black</option>
</select><br>
<button onclick="{document.getElementById('bsx').value=0; document.getElementById('bsy').value=0; document.getElementById('bsblur').value=0;
document.getElementById('bscolor').options[0].selected='selected';
changeBoxShadow('clear');}">Reset</button>
<hr>Transformations:
<br>Set SkewX:
<input type="range" value="0" min="-40" max="40" onChange="changeStyle(this, 'skewx', '', 'skewx(' + this.value + 'deg)')" />
<button onclick="{changeStyle(this, 'skewx', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set SkewY:
<input type="range" value="0" min="-40" max="40" onChange="changeStyle(this, 'skewy', '', 'skewy(' + this.value + 'deg)')" />
<button onclick="{changeStyle(this, 'skewy', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set RotateX:
<input type="range" value="0" min="-180" max="180" onChange="changeStyle(this, 'rotatex', '', 'rotatex(' + this.value + 'deg)')" />
<button onclick="{changeStyle(this, 'rotatex', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set RotateY:
<input type="range" value="0" min="-180" max="180" onChange="changeStyle(this, 'rotatey', '', 'rotatey(' + this.value + 'deg)')" />
<button onclick="{changeStyle(this, 'rotatey', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set RotateZ:
<input type="range" value="0" min="-180" max="180" onChange="changeStyle(this, 'rotatez', '', 'rotatez(' + this.value + 'deg)')" />
<button onclick="{changeStyle(this, 'rotatez', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set TranslateX:
<input type="range" value="0" min="-100" max="400" onChange="changeStyle(this, 'translatex', '', 'translatex(' + this.value + 'px)')" />
<button onclick="{changeStyle(this, 'translatex', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set TranslateY:
<input type="range" value="0" min="-100" max="400" onChange="changeStyle(this, 'translatey', '', 'translatey(' + this.value + 'px)')" />
<button onclick="{changeStyle(this, 'translatey', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set TranslateZ:
<input type="range" value="0" min="-100" max="400" onChange="changeStyle(this, 'translatez', '', 'translatez(' + this.value + 'px)')" />
<button onclick="{changeStyle(this, 'translatez', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set ScaleX:
<input type="range" step="0.1" value="0" min="-5" max="5" onChange="changeStyle(this, 'scalex', '', 'scalex(' + this.value + ')')" />
<button onclick="{changeStyle(this, 'scalex', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set ScaleY:
<input type="range" step="0.1" value="0" min="-5" max="5" onChange="changeStyle(this, 'scaley', '', 'scaley(' + this.value + ')')" />
<button onclick="{changeStyle(this, 'scaley', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
<br>Set Perspective:
<input type="range" value="0" min="-100" max="100" onChange="changeStyle(this, 'perspective', '', 'perspective(' + this.value + 'px)')" />
<button onclick="{changeStyle(this, 'perspective', '', 'clear'); this.previousSibling.value=0;}">Reset</button>
</div>
<br>Class A Style: "<span id="classStyleA"></span>"
<br>Class B Style: "<span id="classStyleB"></span>"
<br>Class C Style: "<span id="classStyleC"></span>"
<br>Current String: "<span id="currentString"></span>"
// by Troy Whorten Feb 26, 2014
function changeBoxShadow(clear, text) {
//get the class to apply the style change to
var styleClassSel = document.getElementById("classSelect");
var styleClass = styleClassSel[styleClassSel.selectedIndex].value;
var ssting="";
//get all the boxes of the selected class
var boxes = document.querySelectorAll(styleClass);
if(!text)
{
sx = "bsx";
sy = "bsy";
sb = "bsblur";
sc = "bscolor";
prop = "boxShadow";
}
else
{
sx = "tsx";
sy = "tsy";
sb = "tblur";
sc = "tcolor";
prop = "textShadow";
}
//get values
var xoff = document.getElementById(sx).value;
var yoff = document.getElementById(sy).value;
var blur = document.getElementById(sb).value;
var color = document.getElementById(sc).options[document.getElementById(sc).selectedIndex].value;
if(!clear && color == "")
color = "black";
if(!clear)
sstring = xoff + "px " + yoff + "px " + blur + "px " + color;
else
sstring = "";
for (var i = 0; i < boxes.length; i++) {
string = "boxes[i].style."+ prop +" ='" + sstring + "'";
document.getElementById("currentString").innerHTML = string;
eval(string);
}
}
function changeStyle(el, prop, unit, trans) {
//get the class to apply the style change to
var styleClassSel = document.getElementById("classSelect");
var styleClass = styleClassSel[styleClassSel.selectedIndex].value;
var style;
var string;
//get the value of the style that changed
if (el.tagName == "SELECT") style = el[el.selectedIndex].value;
else style = el.value;
//if style is undefined, make it blank
if (!style) style = "";
//if unit is undefined, make it blank
if (!unit) unit = "";
//get all the boxes of the selected class
var boxes = document.querySelectorAll(styleClass);
//apply the style change for non-transforms
if (!trans) for (var i = 0; i < boxes.length; i++) {
string = "boxes[i].style." + prop + "='" + style + unit + "'";
document.getElementById("currentString").innerHTML = string;
eval(string);
}
//apply transform styling
if (trans) for (var i = 0; i < boxes.length; i++) {
var transText;
var curTrans;
if (trans == "clear") trans = "";
// browser feature detection
if (boxes[i].style.Transform === "" || boxes[i].style.Transform) {
curTrans = boxes[i].style.Transform.toLowerCase();
string = "boxes[i].style.transform";
}
if (boxes[i].style.webkitTransform === "" || boxes[i].style.webkitTransform) {
curTrans = boxes[i].style.webkitTransform.toLowerCase();
string = "boxes[i].style.webkitTransform";
}
if (boxes[i].style.oTransform === "" || boxes[i].style.oTransform) {
curTrans = boxes[i].style.oTransform.toLowerCase();
string = "boxes[i].style.oTransform";
}
var inString = curTrans.search(prop.toLowerCase());
//alert("inString = " + inString);
// if we find this transformation, find the end, cut it out
if (inString != -1) {
var cutEnd = curTrans.substr(inString).search(/[)]/i);
transText = curTrans.substr(0, inString) + curTrans.substr(inString + cutEnd + 1);
} else transText = curTrans;
//append prop to transformation string if trans isn't empty
if (trans) transText = transText + " " + trans;
string = string + '="' + transText + '"';
document.getElementById("currentString").innerHTML = string;
eval(string);
}
// display the applied styling in the appropriate span
var abox = document.querySelector(".a");
var bbox = document.querySelector(".b");
var cbox = document.querySelector(".c");
document.getElementById("classStyleA").innerHTML = abox.style.cssText;
document.getElementById("classStyleB").innerHTML = bbox.style.cssText;
document.getElementById("classStyleC").innerHTML = cbox.style.cssText;
}
function clearAll() {
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
string = 'boxes[i].setAttribute("style","")';
document.getElementById("currentString").innerHTML = string;
eval(string);
}
// display the applied styling in the appropriate span
var abox = document.querySelector(".a");
var bbox = document.querySelector(".b");
var cbox = document.querySelector(".c");
document.getElementById("classStyleA").innerHTML = abox.style.cssText;
document.getElementById("classStyleB").innerHTML = bbox.style.cssText;
document.getElementById("classStyleC").innerHTML = cbox.style.cssText;
}
.container, .controls {
border-style:dotted;
border-width:1px;
width: 420px;
height: 420px;
position: relative;
display: inline-block;
vertical-align: top;
overflow: scroll;
}
.controls {
width: 300px;
}
.box {
width: 80px;
height: 80px;
color: white;
text-align: center;
overflow: hidden;
}
.a {
background-color: blue;
}
.b {
background-color: red;
}
.c {
background-color: green;
}
.resetall {
float:right;
}