在 html 文件中有 2 个 css 代码块如何使用 JS 使只有一个工作？答案

【问题标题】：Having 2 css code blocks in html files how to make only one work using JS?在 html 文件中有 2 个 css 代码块如何使用 JS 使只有一个工作？
【发布时间】：2011-01-02 15:31:39
【问题描述】：

所以我们有 1 个 html 文件（必需）。里面有 2 个 CSS 样式块和 1 个 JS 块。如何使设置为使用 JS 中的一种样式成为可能？（我需要它在 IE6 IE7 IE8 FF 和 chrome 9 中工作 =）我需要为 IE9 和 Chrome 8 及更高版本提供一个 CSS，为所有其他提供另一个 CSS。

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

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

【问题讨论】：

标签： javascript html css internet-explorer google-chrome

【解决方案1】：

使用条件 cmets 专门针对 IE6，如下所示：

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

或者反过来，无论它是什么..但是这些 cmets 中的任何内容仅适用于 IE6。上述方法不需要 JavaScript :)

【讨论】：

我想他是在问如何在 javascript 中做到这一点。
@Konerak - 我同意，但有时答案是“不要用 JavaScript 做，有更简单的方法”。
同意，但我们还不知道他为什么要在 JS 中这样做——也许用户有两个按钮来选择字体大小？
@Konerak - 这个问题特别提到了 IE6，它确实存在固有的样式问题......所以我认为这就是问题所在:)
...好吧，我明白了...如何让它给我一个用于 IE9 和 chrome 的 CSS 和另一个用于所有其他的 CSS？

【解决方案2】：

对于涉及 JS 和处理 chrome 的替代方式。（我从 ExtJs 中学到了这种形式，但我不确定它的起源。）

加载浏览器检测脚本。 PPK 的不错：http://www.quirksmode.org/js/detect.html.

向 document.body 添加类。

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

现在像这样写你的CSS

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

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

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

您也可以在其中混合使用操作系统，但我不确定您是否会需要它。

【讨论】：