使用 .no-js 类检测 js答案

【问题标题】：Using .no-js class for detection of js使用 .no-js 类检测 js
【发布时间】：2013-04-05 13:38:08
【问题描述】：

我一直使用的方法是在<html> 标签上添加一个.no-js 类，然后使用modernizr 剥离标签并在用户浏览器中启用JavaScript 时将其替换为js。

基本上，我已经构建了一个 CSS3 移动和桌面导航。如果有 CSS 转换等（使用modernizr 检查）以及是否有 js 或无 js，我有样式来改变它的行为。

问题是，在 JavaScript 有时间加载并将类更改为 js 之前，我得到了 no-js 版本的闪光。（因为默认类是no-js）

我无法理解的是如何找到解决此问题的方法。如果我将 js 特定代码作为主类，然后使用前缀 .no-js 指定另一个代码，即使启用了 js，它也会闪烁 no-js。如果我切换它，它会做同样的事情......

也许我是愚蠢的，但任何指针都会很棒。

【问题讨论】：

您是否将脚本的执行延迟到页面完成加载？如果是这样，请不要 - 您希望它在页面完成渲染之前执行。
不，脚本几乎完全由 CSS 组成。 jQuery只有一小行。
从技术上讲，一行仍然是一个脚本。那一行是什么样的？它在您的页面中的什么位置？

标签： javascript css modernizr

【解决方案1】：

Paul Irish 有一个excellent blog post 来处理这个问题。这是该帖子的解决方案：

<!DOCTYPE html>
<html lang='en' class='no-js'>
    <head>
        <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
        ...

关键是确保您在浏览器有机会呈现任何内容之前更新了类名。

【讨论】：

【解决方案2】：

您可以在<head> 的最顶部添加一个简短的脚本：

<script>
  document.documentElement.className =
    document.documentElement.className.replace('no-js', 'js');
</script>

不要忘记<noscript> 标记，启用 JavaScript 时会忽略该标记。

【讨论】：