我注意到,在许多模板引擎中,在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>元素总是有这个类。 有人能解释一下为什么这种情况如此频繁吗?


当前回答

no-js类被javascript脚本删除,所以如果js被禁用,你可以使用css修改/显示/隐藏东西。

其他回答

Modernizr.js将删除no-js类。

这允许你为.no-js创建一些CSS规则,只在Javascript被禁用时才应用它们。

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

参见Modernizer的源代码。

这不仅适用于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 {

}

no-js类用于设置网页样式,取决于用户是否在浏览器中禁用或启用JS。

根据Modernizr文档:

no-js 默认情况下,Modernizr会将<html class="no-js">重写为<html 类= " js " >。这让隐藏某些元素,只应该是 暴露在执行JavaScript的环境中。如果你想的话 禁用此更改,您可以将enableJSClass设置为false 配置。

看看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不在浏览器中运行,样式就会不同。