为 IE6/其他浏览器运行不同的 JS答案

【问题标题】：Running different JS for IE6/Other browsers为 IE6/其他浏览器运行不同的 JS
【发布时间】：2011-01-13 12:14:37
【问题描述】：

我有一些代码：

document.getElementById("gD" + gDay + gMonth + gYear).setAttribute("class", "gDay gDayHover");

这适用于所有现代浏览器，但不适用于 IE6。 IE6需求：

document.getElementById("gD" + gDay + gMonth + gYear).setAttribute("className", "gDay gDayHover");

我将有另一个变量：

var addOnClassAtt;

设置为“”或“名称”，以便我可以运行单行：

document.getElementById("gD" + gDay + gMonth + gYear).setAttribute("class" + addOnClassAtt, "gDay gDayHover");

如何确定用户运行的浏览器是否需要 className 而不是 class？我宁愿避开浏览器检测并有一个初始的 try catch 类型方法来设置它，但如果这不可能，那么最好的方法是什么？

【问题讨论】：

【解决方案1】：

在大多数情况下，最好进行特征检测而不是浏览器检测。 Javascript 中的特征检测比浏览器检测更容易、更可靠。

在这个特定的例子中，你最好这样设置类：

document.getElementById(...).className = "gDay gDayHover";

此代码应适用于所有浏览器，包括 IE6。

你遇到这个问题的原因是类属性在 DOM 中被称为className。

这是因为单词class 是 JavaScript 中的保留字，因此在 DOM 中包含它在某些情况下可能会导致歧义，但正如您所见，该问题的解决方案最终会导致其他问题！

从中吸取的教训是setAttribute 不是用于设置class 属性的可靠函数。大多数其他属性使用setAttribute 应该没问题，尽管其他一些属性也可能有问题，所以一般最好使用 DOM 属性。

【讨论】：

【解决方案2】：

不要用setAttribute来设置类名，IE会崩溃；而是设置 DOM 对象的属性 className：

document.getElementById("gD" + gDay + gMonth + gYear).className = "gDay gDayHover";

【讨论】：