javascript - IE7 忽略我的 .js css 规则 - CSS/Javascript 问题？

Question

我在 元素上使用 .js 和 .no-js 类来区分具有 Javascript 和不具有 Javascript 的布局。

对于 元素，我添加了一个默认类“no-js”。然后我在 header 中包含一行脚本 document.getElementsByTagName("html")[0].setAttribute("class","js"); 将 html 类切换为 'js '.显然，这行代码只适用于启用了 js 的浏览器，因此 元素将变为 而未启用 js 的浏览器将继续阅读 。

然后我将简单地使用 .js someElement{ font-weight:bold;} 与 .no-js someElement{ font-weight:normal;} 来设置样式我的页面不同。

但是，我发现这种方法在 IE7 上非常失败。在 IE7 上，该脚本有效——至少看起来是这样。在开发人员工具上，它显示 。但是，所有以 .js 开头的 css 样式都会被 IE7 忽略，并且 IE7 的行为就好像 元素具有类 .no-js。 (查看 http://bit.ly/LMre3N 以获得更清晰的图片。)

我无法开始想象这里到底出了什么问题:这是 IE7 在呈现 CSS 时行为错误的情况，还是脚本无法正常工作的情况？这是我尝试过的:

CSS

1. 更改 .js 和 .no-js 声明的顺序，我认为可能是后者覆盖了导致问题的前者 - 否。
2. 更改脚本和样式表的顺序，因为这可能是因为 IE7 在读取脚本之前读取了 .no-js 样式表 - 否。
3. 更改声明的特殊性 - 可能更具体会导致 IE7 读取 .js 声明 - 不。
4. 从文档中完全删除 .no-js 类，希望 IE7 能够读取 .js 声明。否 - 它只是忽略 .no-js 和 .js 声明。

简而言之，IE7 完全完全忽略了存在 .js 声明的事实。所以我认为可能是脚本有问题，这就是我所做的:

Javascript

1. 我在 <script> 中添加了“type="text-javascript"' - 没有效果。
2. 我尝试了 document.documentElement 而不是 document.getElementsByTagName('html')[0] - 还是一样。
3. 我使用了 var htmlOrWhat=document.getElementsByTagName("html")[0];
alert(htmlOrWhat);，FF、Chrome、Opera、Safari、IE8 和 IE9 返回“[object HTMLHtmlElement]”，而 IE7 返回 [object]，导致我认为 IE7 没有读取 元素适本地。
4. 然后我尝试读取 的 id 和 lang 属性来测试 IE7 是否真的正确读取元素，是的，它正确地检索了这些属性，它只是简单地拒绝将 .js css 声明应用到它。

到现在为止，我已经束手无策(虽然我怀疑 [object] 异常与我的问题有关)，我希望 Stackoverflow 的某个人能够帮助我。如果有人能在这里指出 IE7 的问题，确切地，以及如何修复它，我将不胜感激。提前致谢。

Answer 1

setAttribute() 和 getAttribute() 通常在 IE7 和更早版本(以及更高版本的兼容模式)中被破坏。请改用元素的 className 属性。

document.getElementsByTagName("html")[0].className = "js";

这是一个 fiddle 演示 - http://jsfiddle.net/ajcw/6Yz8x/1/