├── LICENSE
├── README.md
└── toggle-styles.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Petr Huřťák
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Toggle CSS Bookmarklet
 2 | 
 3 | ![Gif how toggle-css-bookmarklet works](http://i.imgur.com/lIVMtwK.gif)
 4 | 
 5 | ## Put inside your bookmarks
 6 | 
 7 | ```js
 8 | javascript:(function(){function d(a,b){a.setAttribute("data-css-storage",b)}function e(a){var b=a.getAttribute("data-css-storage");a.removeAttribute("data-css-storage");return b}var c=[];(function(){var a=document.body,b=a.hasAttribute("data-css-disabled");b?a.removeAttribute("data-css-disabled"):a.setAttribute("data-css-disabled","");return b})()?(c=document.querySelectorAll("[data-css-storage]"),[].slice.call(c).forEach(function(a){"STYLE"===a.tagName?a.innerHTML=e(a):"LINK"===a.tagName?a.disabled=!1:a.style.cssText=e(a)})):(c=document.querySelectorAll("[style], link, style"),[].slice.call(c).forEach(function(a){"STYLE"===a.tagName?(d(a,a.innerHTML),a.innerHTML=""):"LINK"===a.tagName?(d(a,""),a.disabled=!0):(d(a,a.style.cssText),a.style.cssText="")}))})();
 9 | ```
10 | full source code: https://github.com/Hurtak/toggle-css-bookmarklet/blob/master/toggle-styles.js
11 | 
12 | ## Tweet sized bookmarklet (only disables styles)
13 | - `121` characters
14 | 
15 | ```js
16 | javascript:for(let e of document.querySelectorAll('link,style,[style]'))e.style.cssText?e.style.cssText='':e.outerHTML=''
17 | ```
18 | 


--------------------------------------------------------------------------------
/toggle-styles.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |     'use strict';
 3 | 
 4 |     var attributeStorage = 'data-css-storage';
 5 |     var attributeDisabled = 'data-css-disabled';
 6 |     var elements = [];
 7 | 
 8 |     var disabled = areStylesDisabled();
 9 |     if (!disabled) {
10 |         // disable styles
11 |         elements = document.querySelectorAll('[style], link, style');
12 | 
13 |         [].slice.call(elements).forEach(function(el) {
14 |             if (el.tagName === 'STYLE') {
15 |                 saveToStorage(el, el.innerHTML);
16 |                 el.innerHTML = '';
17 |             } else if (el.tagName === 'LINK') {
18 |                 saveToStorage(el, '');
19 |                 el.disabled = true;
20 |             } else {
21 |                 saveToStorage(el, el.style.cssText);
22 |                 el.style.cssText = '';
23 |             }
24 |         });
25 |     } else {
26 |         // re-enable styles
27 |         elements = document.querySelectorAll('[' + attributeStorage + ']');
28 | 
29 |         [].slice.call(elements).forEach(function(el) {
30 |             if (el.tagName === 'STYLE') {
31 |                 el.innerHTML = getFromStorage(el);
32 |             } else if (el.tagName === 'LINK') {
33 |                 el.disabled = false;
34 |             } else {
35 |                 el.style.cssText = getFromStorage(el);
36 |             }
37 |         });
38 |     }
39 | 
40 |     function saveToStorage(el, data) {
41 |         el.setAttribute(attributeStorage, data);
42 |     }
43 | 
44 |     function getFromStorage(el) {
45 |         var data = el.getAttribute(attributeStorage);
46 |         el.removeAttribute(attributeStorage);
47 | 
48 |         return data;
49 |     }
50 | 
51 |     function areStylesDisabled() {
52 |         var el = document.body;
53 | 
54 |         var disabled = el.hasAttribute(attributeDisabled);
55 |         if (disabled) {
56 |             el.removeAttribute(attributeDisabled);
57 |         } else {
58 |             el.setAttribute(attributeDisabled, '');
59 |         }
60 | 
61 |         return disabled;
62 |     }
63 | 
64 | }());
65 | 


--------------------------------------------------------------------------------