Skip to content

Instantly share code, notes, and snippets.

@webdevotion
Created September 26, 2013 07:32
Show Gist options
  • Save webdevotion/6710934 to your computer and use it in GitHub Desktop.
Save webdevotion/6710934 to your computer and use it in GitHub Desktop.
JavaScript Example
<html>
<head>
<style>
body{
font-family: "Verdana";
}
div.row{
height:400px;
clear:both;
padding:1em;
}
div.column{
float:left;
height: 100%;
width:400px;
background-color:#efefef;
}
div.column:nth-of-type(1)
{
padding:1em;
}
#output{
box-shadow: inset 0 0 1px #999;
background-color: rgba(253, 172, 33, 0.16);
color:#444;
overflow-x:hidden;
overflow-y: scroll;
width:600px;
}
#output,ul,li,pre,code{margin:0;padding:0;}
li{
list-style-type: none;
height:20px;
}
#output li{
border-bottom: 1px solid rgba(0,0,0,.2);
}
#output li:hover{
background-color: white;
cursor:pointer;
}
.lineNumber{
background-color: rgba(255,255,255,.4);
display: inline-block;
padding:2px;
margin-right:10px;
width: 30px;
text-align: right;
color:rgba(17, 13, 7, .4);
font-weight: bold;
}
li.even{
background-color: rgba(255,255,255,.5);
}
li.odd{
background-color: rgba(255,255,255,0);
}
#output{
border: 1px solid #ccc;
}
div:not(#output){
margin:0 1em 0 0;
}
div#output{
margin:1em;
}
</style>
</head>
<body>
<div class="row">
<div id="container" class="column">
<h1>Layout + Design</h1>
<ul id="list">
<li>Item one</li>
<li>Second item</li>
<li>And another one</li>
</ul>
</div>
<div id="output" class="column">
<ul>
</ul>
</div>
</div>
<script>
function getHTMLElementById( idOfHTMLTag )
{
return document.getElementById( idOfHTMLTag );
}
function getAllCSSPropertiesOf( htmlElement )
{
var pseudoElement = null;
return window.getComputedStyle(htmlElement,pseudoElement);
}
function createListItemElement()
{
return document.createElement("li");
}
function getCSSProperty(css,property)
{
var value = css.getPropertyValue(property);
if( !(property && value) ) return null;
return {property:property, value:value};
}
function getClassNameForRow( row )
{
return row%2 == 0 ? 'even' : 'odd';
}
function getContainer ()
{
return getHTMLElementById( containerId );
}
function getInspector()
{
return document.getElementById( inspectorId ).getElementsByTagName("ul")[0];
}
function addListItemToInspector( row, text )
{
var li = createListItemElement();
li.className = getClassNameForRow( row );
li.innerHTML = text;
return getInspector().appendChild(li);
}
function formatted(lineNumber, css )
{
var spanForLineNumber = "<span class='lineNumber'>" + lineNumber + "</span>";
var cssStyleProperty = css.property;
var cssStyleValue = css.value;
var codeTagForCSSProperty = "<code>" + cssProperty + ": " + cssStyleValue + ";</code>";
return "<pre>" + spanForLineNumber + codeTagForCSSProperty + "</pre>";
}
var containerId = "container";
var inspectorId = "output";
var row = 0;
var container = getContainer();
var allCSSProperties = getAllCSSPropertiesOf( container );
for( var cssProperty in allCSSProperties )
{
var textForListItem;
var style = getCSSProperty( allCSSProperties, cssProperty );
if( style )
{
textForListItem = formatted(row, style);
var li = addListItemToInspector( row, textForListItem );
row++;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment