/css_scrambler.js
Created Dec 23, 2015
CSS Scrambler is a bookmarklet that reads the HTML from top to bottom and shifts the CSS rules from each element onto its preceding element. The result is a scrambled layout. It can be run multiple times on a page!
| // the css rules that we want to copy | |
| var all_styles = ["background","backgroundAttachment","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","border","borderBottom","borderBottomColor","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopStyle","borderTopWidth","borderWidth","borderImage","borderRadius","bottom","boxShadow","captionSide","clear","clip","color","content","cssFloat","cursor","direction","display","fill","font","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","height","left","letterSpacing","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","maxHeight","maxWidth","minHeight","minWidth","opacity","outline","outlineColor","outlineStyle","outlineWidth","overflow","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","position","quotes","right","size","tableLayout","textAlign","textDecoration","textIndent","textOutline","textShadow","textTransform","top","transform","verticalAlign","visibility","whiteSpace","width","wordSpacing","zIndex"]; | |
| i = 0; | |
| // get all elements, not including scripts and styles | |
| elements = document.querySelectorAll("body *:not(script):not(style)"); | |
| // run the scrambler | |
| scrambler = setInterval(function(){ | |
| // end when all elements have been scrambled | |
| if( i >= elements.length-1 ){ | |
| clearInterval(scrambler); | |
| return; | |
| } | |
| // computed style of the source element | |
| computed_style = window.getComputedStyle(elements[i+1]); | |
| // copy styles from source to destination element one by one | |
| all_styles.forEach(function(style_name){ | |
| style_value = computed_style[style_name]; | |
| if( style_value !== undefined && style_value !== "" ){ | |
| // try to prevent hidden elements | |
| if( style_name == "display" && style_value == "none" ){ style_value = "block"; } | |
| if( style_name == "overflow" && style_value == "hidden" ){ style_value = "visible"; } | |
| if( style_name == "opacity" ){ style_value = "1"; } | |
| // give everything cool animated transitions | |
| elements[i].style.transition = "all 0.5s ease"; | |
| // set the copied style | |
| elements[i].style[style_name] = style_value; | |
| } | |
| }); | |
| i++; | |
| },50); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment