Graceful Degrading Javascript ~ Add CSS With Javascript!

I've compliled/created ALL the best/easiest methods of inserting CSS via JS below. In order to enable your webpage to gracefully degrade in the absense of javascript, you often need to use javascript to add some of your CSS Styles (e.g. display:none, left:-999em, etc). Otherwise, when JS is turned off, your element is stuck on display:none. BLAH, BLAH, BLAH, I can't stand that forum lecture, so I won't give it to you. View the source code in the demo for clarification. Which Method would I use? I don't know, they're all pretty cool!

Here is the HTML for all Methods shown only once...

<p id="method1">Method #1</p>
<p id="method2">Method #2</p>
<p id="method3">Method #3</p>
<p id="method4">Method #4</p>
<p id="method5">Method #5</p>
<p id="method6">Method #6</p>

Method #1 (and demo) uses jQuery to add the class of "js-on" to the html tag. When JS is off, the class is no longer there. The class is added BEFORE page load (detailed explanation here).

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js-on');
</script>
<style type="text/css">
html.js-on #method1 {color:red;}
</style>

Method #2 (and demo) also uses jQuery, but inserts the CSS style directly into the id or element you specify (e.g. #method2). When JS is off, the style is no longer added. I wrote two rules so you know how it should look. Note: the comma seperating them must stay off on the last rule otherwise IE6/7 choke.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#method2').css({
color:"blue",
fontWeight:"bold"
});
});
</script>

Method #3 (and demo) simply uses document.write to add the CSS. No worry about Flash of Unstyled Content (FOUC) here, document.write writes it in where it stands. When JS is off, it simply doesn't work.

<script type="text/javascript">
document.write('<style>#method3 {color:green;}<\/style>'); 
</script>

Method #4 (and demo) is working off the same premise, but doing it backwards. The noscript tag simply overrides the CSS when JS is off. Obviously, the least elegant of the bunch, uses the cascade to create the effect, and does not validate.

<style type="text/css">
#method4 {color:purple;}
</style>
<noscript>
<style type="text/css">
#method4 {color:black;}
</style>
</noscript>

Method #5 (and demo) is pretty nifty! It's credited to Luke Smith on the Yahoo team. You simply put your CSS styles into the script (as shown below) and the script replaces itself with style tags. Cool right?! When JS is off, it doesn't work. To use, download the teeny script (script2style.js), and place this in your head.

<script type="text/javascript" src="javascript/script2style.js">
#method5 {color:aqua;}
</script>

Method #6 (and demo) uses the same type of technique as Method #1, but does not rely on the jQuery library to function. This script adds the class of "js-on" to the body tag. When JS is off, the class is no longer there. Note: place the script directly below the body tag.

<style type="text/css">
body.js-on #method6 {color:yellow;}
</style>
<script type="text/javascript">
// this script must come after body
document.body.className = "js-on";
</script>