Other / CSS / Toggle Styles Bookmarklet

The Toggle Styles bookmarklet toggles page CSS on/off while preserving state. Stores original CSS in data attributes when disabling (STYLE content, LINK disabled state, inline styles), restores all CSS from storage when re-enabling, and toggles back and forth on each run. Unlike simple "remove CSS" bookmarklets, this preserves the original styles for restoration. Useful for testing content structure and accessibility with and without styling.

javascript:%21function()%7B%22use%20strict%22%3Bfunction%20t(t%2Ce)%7Bt.setAttribute(s%2Ce)%7Dfunction%20e(t)%7Bvar%20e%3Dt.getAttribute(s)%3Breturn%20t.removeAttribute(s)%2Ce%7Dvar%20s%3D%22data-css-storage%22%2Cr%3D%22data-css-disabled%22%2Cn%3D%5B%5D%3B(function()%7Bvar%20t%3Ddocument.body%2Ce%3Dt.hasAttribute(r)%3Breturn%20e%3Ft.removeAttribute(r)%3At.setAttribute(r%2C%22%22)%2Ce%7D)()%3F(n%3Ddocument.querySelectorAll(%22%5B%22%2Bs%2B%22%5D%22)%2C%5B%5D.slice.call(n).forEach(function(t)%7B%22STYLE%22%3D%3D%3Dt.tagName%3Ft.innerHTML%3De(t)%3A%22LINK%22%3D%3D%3Dt.tagName%3Ft.disabled%3D%211%3At.style.cssText%3De(t)%7D))%3A(n%3Ddocument.querySelectorAll(%22%5Bstyle%5D%2C%20link%2C%20style%22)%2C%5B%5D.slice.call(n).forEach(function(e)%7B%22STYLE%22%3D%3D%3De.tagName%3F(t(e%2Ce.innerHTML)%2Ce.innerHTML%3D%22%22)%3A%22LINK%22%3D%3D%3De.tagName%3F(t(e%2C%22%22)%2Ce.disabled%3D%210)%3A(t(e%2Ce.style.cssText)%2Ce.style.cssText%3D%22%22)%7D))%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2FHurtak%2Ftoggle-css-bookmarklet%5CnBookmarklet%20name%3A%20Toggle%20Styles%5Cn%22)%3B