Compute CSS Styles
Snippet Menu
12
Thu. Jul. 20th, 2006 11:57 AM 
1 of 1
toddersbud
cascade | CSS | firefox | HTML | JavaScript | Styles 
0 comments
This shows how the computed style of each node differs from the computed style of its parent. The root element, which has no parent, is instead compared against the root of a blank HTML document.
* create a new bookmark called "compute styles" in your firefox toolbar. Place the snippet code in the location field of your "compute styles". click the compute styles bookmark, then click an element on the page with the crosshairs.
* create a new bookmark called "compute styles" in your firefox toolbar. Place the snippet code in the location field of your "compute styles". click the compute styles bookmark, then click an element on the page with the crosshairs.
javascript:(function(){function A(n,g){var p=n.parentNode,t=n.tagName;if(!p)return %22%22;if(!t)return A(p,g);var T=t.toUpperCase(),b=(T!=%22TABLE%22&&T!=%22TBODY%22&&T!=%22THEAD%22&&T!=%22TR%22),c=n.className,i=n.id;return A(p,' > ')+(b?T:T.toLowerCase())+(c?%22.%22+c:%22%22)+(i?%22#%22+i:%22%22)+(b?g:' ');}document.onmouseover=function(e){e=e?e:event;var s,g=e.target;g=g?g:e.srcElement;try{s=A(g,'')+%22 (click for computed styles)%22;}catch(err){s=err.message;}window.status=s;return true;};window.status=A(document.documentElement,'');var newSS,styles='* { cursor: crosshair; }';newSS=document.createElement('link');newSS.rel='stylesheet';newSS.type='text/css';newSS.href='data:text/css,'+escape(styles);document.getElementsByTagName(%22head%22)[0].appendChild(newSS);document.onclick=function(e){e=e?e:event;var s,g=e.target;g=g?g:e.srcElement;var x=window.open('','computedStyles');x.document.open();x.document.close();var d=x.document;x.onunload=function(){document.onclick=null;document.onmouseover=null;window.status=null;newSS.href='data:text/css,';};function sp(n,t,col){var r=d.createElement(n);r.appendChild(d.createTextNode(t));if(col)r.style.color=col;return r;}var typeIndex={'top':1,'bottom':1,'height':1,'width':1,'left':1,'right':1,'position':0,'display':0,'-moz-appearance':0,'-moz-box-sizing':0};var colors=[%22red%22,%22green%22,%22black%22];function undirect(v){return v.replace(/\-(left|top|bottom|right)/,%22-*%22);}function diff(n,p){pcs=p.ownerDocument.defaultView.getComputedStyle(p,%22%22);ncs=n.ownerDocument.defaultView.getComputedStyle(n,%22%22);var A=[];var B={};var C={};for(var i=0;i 
todd budnikas
Comments
Voting
Votes Up
Votes Down
There are currently no comments for this snippet.