Toggle CSS In Mozilla

Updated!

I’ve tweaked the code below to also toggle the <style> tags .

Warning: the XSLT processor I use to serve this site currently mistakenly escapes the pipe and double-pipe (logical or) operator in the javascript code. Make sure to change these back before you try using the code below. Hopefully I can get the XSLT stuff upgraded this weekend.

So I went to a CSS presentation given by Eric Meyer
last night ad Tri-C West. Great presentation Eric! One thing he did a lot was switch between styled and unstyled pages, but he did this
in IE because IE has a preference for enabling/disabling stylesheets. Mozilla/Netscape doesn’t appear to have one. :-(

So, after some tinkering, with the help of the Preferences Toolbar, you can now have a “Toggle CSS” button.

1. Once you’ve installed the PrefBar, click the “Customize” button on the right side of the PrefBar.
2. Click the “New Item” button.
3. In the New Item dialog box, under the Item Type dropdown menu, select “Button”
4. In the Id text box, type “toggleCSS”
5. In the Label text box, type “Toggle CSS”
6. In the onclick text box, enter the following javascript:
   <br /> var links = window.content.document.getElementsByTagName(“link”);var styles = window.content.document.getElementsByTagName(“style”);var regex_rel = /^stylesheet/i;var regex_media = /^(all|screen)/i;for (var l=0;l<links.length;l++) {var link = links[l];if (regex_rel.test(link.rel) && (regex_media.test(link.media) || !link.media)) {link.disabled=!link.disabled;};};for (var s=0;s<styles.length;s++) {var style = styles[s];style.disabled=!style.disabled;};
7. Hit “OK” to close all remaind dialog boxes.

Whala! You should now be able to toggle on/off the stylesheets in the link tags of each site.

A couple items to note. The code will only toggle link tags with rel=“Stylsheet” and media=“screen”, media=“all”, or no media specified.
I use Mozilla, so I’ve not tried the PrefBar in Netscape, but it should work. (Famous Last Words).

Here is the tabulated code for the curious:

<p>var links = window.content.document.getElementsByTagName(“link”);<br /> var styles = window.content.document.getElementsByTagName(“style”);<br /> var regex_rel = /^stylesheet/i;<br /> var regex_media = /^(all|screen)/i;</p> <p>for (var l=0;l<links.length;l++) {<br /> var link = links[l];<br /> if (regex_rel.test(link.rel) && (regex_media.test(link.media) || !link.media)) {<br /> alert(link.media);<br /> link.disabled=!link.disabled;<br /> };<br /> };</p> <p>for (var s=0;s<styles.length;s++) {<br /> var style = styles[s];<br /> style.disabled=!style.disabled;<br /> };