Question

我注意到在很多模板引擎中，HTML5 Boilerplate，各种框架和普通的php网站中都有no-js类添加到<HTML>标记中。

为什么这样做？是否存在某种对此类做出反应的默认浏览器行为？为什么总是包括它？如果不存在no-“no-js”情况并且html可以直接解决，那么这不会使类本身过时吗？

以下是来自HTML5 Boilerplate index.html的示例：

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

如您所见，<html>元素将始终具有此类。有人可以解释为什么经常这样做吗？

Answer 1

当Modernizr运行时，它会删除“no-js”类并将其替换为“js”。这是一种应用不同CSS规则的方法，具体取决于是否启用了Javascript支持。

请参阅Modernizer's source code。

Answer 2

Modernizr功能检测库使用no-js类。当Modernizr加载时，它会将no-js替换为js。如果禁用JavaScript，则该类仍然存在。这允许您编写容易针对任一条件的CSS。

来自Modernizrs' Anotated Source (no longer maintained)：

从元素中删除“no-js”类（如果存在）： docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

以下是Paul Irish撰写的博客文章，描述了这种方法： http://www.paulirish.com/2009/avoiding-the-fouc-v3/

我喜欢做同样的事情，但没有Modernizr。如果启用了JavaScript，我会在<script>中将以下<head>更改为js。我更喜欢在正则表达式版本上使用.replace("no-js","js")，因为它不那么神秘，适合我的需要。

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

在此技术之前，我通常只使用JavaScript直接应用js依赖样式。例如：

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

使用no-js技巧，现在可以使用css：

完成此操作

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

这是首选，因为：

加载速度更快，没有FOUC（无格式内容的闪烁）
分离关注等......

Answer 3

Modernizr.js将删除no-js类。

这允许您为.no-js something制作CSS规则，以便仅在禁用Javascript时应用它们。

Answer 4

no-js类被javascript脚本删除，因此如果禁用js，您可以使用css修改/显示/隐藏内容。

Answer 5

这不仅适用于Modernizer。我看到一些像下面这样的网站工具来检查它是否支持javascript。

<body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

如果有javascript支持，那么它将删除no-js类。否则no-js将保留在body标记中。然后，当没有javascript支持时，他们控制css中的样式。

.no-js .some-class-name {

}

Answer 6

查看Modernizer中的源代码，本节：

// Change `no-js` to `js` (independently of the `enableClasses` option)
// Handle classPrefix on this too
if (Modernizr._config.enableJSClass) {
  var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)');
  className = className.replace(reJS, '$1' + classPrefix + 'js$2');
}

所以基本上它会搜索classPrefix + no-js类，并将其替换为classPrefix + js。

如果JavaScript没有在浏览器中运行，那么使用它会有不同的样式。

Answer 7

no-js类用于设置网页样式，具体取决于用户是在浏览器中禁用还是启用了JS。

按照Modernizr docs：

无js

默认情况下，Modernizr将重写<html class="no-js"> to <html class="js">。这样可以隐藏某些仅应为   在执行JavaScript的环境中公开。如果你想   禁用此更改，您可以在您的应用中将enableJSClass设置为false   配置。

HTML“no-js”类的目的是什么？

7 个答案: