Toggle Style-Elements

bookmarklet.html

<a href="javascript:(function(d,g,a,b,c,e,f,h,n,t,u,w,x){f=function(e,o,k){for(k in o)e.setAttribute(k,o[k])};c=function(e){return d.createElement(e)};n=function(s){return d.createTextNode(s)};a=function(e,c,k){for(k in c)e.appendChild(c[k])};w=c(g);h=c(g);t=n('Toggle Style-Elements');u=c('ul');b=d.querySelector('body');x='position:fixed;top:0;right:0;z-index:99999;margin:0;padding:0;background:#f4fff4;color:#99ad85;font:14px Helvetica,Arial,sans-serif;border:1px solid #bada55;border-top-width:0;border-right-width:0;border-bottom-left-radius:10px;';e=d.getElementById('tcss');if(b&&e)f(e,{style:x+(e.style.display=='none'?'':'display:none')});else if(b){f(w,{id:'tcss',style:x});f(h,{style:'font:20px Georgia,serif;padding:10px;margin:0;background:#dae7da;color:#693'});f(u,{style:'margin:0;padding:10px;list-style-type:disc'});f(u,{style:'margin:0;padding:10px;list-style-type:disc;'});a(b,[w]);a(w,[h,u]);a(h,[t]);[].slice.call(d.styleSheets).forEach(function(s,i,l,m,y,z){y='margin:0 0 0 20px;padding:0;cursor:pointer;line-height:20px';z=';list-style:circle';l=c('li');m=n(s.href||'inline style #'+i);f(l,{style:y});l.addEventListener('click',function(){f(l,{style:y+((s.disabled=!s.disabled)?z:'')})});a(l,[m]);a(u,[l]);})}})(document,'div');">Toggle CSS</a>

code.js

/*
 * TCSS - Toggle Style-Elements
 */
(function() {
  var wrapper = document.createElement('div'),
      header = document.createElement('div'),
      headerText = document.createTextNode('Toggle Style-Elements'),
      unorderedList = document.createElement('ul'),
      body = document.querySelector('body'),
      wrapperStyle = 'position:fixed;top:0;right:0;z-index:99999;margin:0;padding:0;background:#f4fff4;color:#99ad85;font:14px Helvetica,Arial,sans-serif;border:1px solid #bada55;border-top-width:0;border-right-width:0;border-bottom-left-radius:10px;',
      exist = document.getElementById('tcss');

  if (body && exist) {

    // tcss already exists: toggle display
    exist.setAttribute('style', wrapperStyle + (exist.style.display == 'none' ? '' : 'display:none;'));

  } else if (body) {

    // on non-frameset sites: add tcss
    wrapper.setAttribute('id', 'tcss');
    wrapper.setAttribute('style', wrapperStyle);
    header.setAttribute('style', 'font:20px Georgia,serif;padding:10px;margin:0;background:#dae7da;color:#693');
    unorderedList.setAttribute('style', 'margin:0;padding:10px;list-style-type:disc;');

    document.querySelector('body').appendChild(wrapper);
    header.appendChild(headerText);
    wrapper.appendChild(header);
    wrapper.appendChild(unorderedList);

    Array.prototype.slice.call(document.styleSheets).forEach(function(style, index) {
      var baseStyle = 'margin:0 0 0 20px;padding:0;cursor:pointer;line-height:20px;',
          disabledStyle = 'list-style:circle',
          listItem = document.createElement('li')
          listItemText = document.createTextNode(style.href || 'inline style #' + index);

      listItem.setAttribute('style', baseStyle);
      listItem.addEventListener('click', function() {
        listItem.setAttribute('style', baseStyle + ((style.disabled = !style.disabled) ? disabledStyle : ''));
      })
      listItem.appendChild(listItemText);
      unorderedList.appendChild(listItem);
    })
  }

})();