在html文件中有2个CSS代码块，如何仅使用JS进行一项工作？

Question

So we have 1 html file (required). In there 2 css style blocks and one JS block. how to make it possible to set to use one of the styles from JS? (I need it to work in IE6 IE7 IE8 FF and chrome 9 =) I need to give one css for IE9 and Chrome 8 and up and another CSS for all others.

<style type="text/css" >
H1 {font-size: 24pt; font-family: arial}
</style>

<style type="text/css">
H1 {font-size: 15pt;}
</style>

Answer 1

Use conditional comments to target IE6 specifically, like this:

<!--[if IE 6]>
<style type="text/css">
  H1 {font-size: 15pt;}
</style>
<![endif]-->

Or the other way around, whichever it is..but whatever's inside these comments will only apply to IE6. No JavaScript is required for the above approach :)

Answer 2

For an alternative way involving JS and handing chrome. (I learned this form ExtJs but I'm not sure where it originated.)

Load a browser detection script. PPK's is pretty good: http://www.quirksmode.org/js/detect.html .

Add classes to document.body.

document.body.className += ' ' + BrowserDetect.browser 
  + ' ' + BrowserDetect.browser + '-' + BrowserDetect.version;

Now write your css like this

H1 {
  font-size: 24pt; 
  font-family: arial;
}

.Explorer-6 H1 {
  font-size: 15pt;
}

.Chrome-9 H1 {
  /* ... */
}

You could mix the OS in there too, but I'm not sure you'll ever need it.