541

我注意到在许多模板引擎中，在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>元素将始终具有此类。有人可以解释为什么经常这样做吗？

4

7 回答 7

520

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

请参阅Modernizer 的源代码。

于 2011-07-17T14:37:37.117 回答
116

Modernizr特征检测库no-js使用该类。当 Modernizr 加载时，它会替换为. 如果 JavaScript 被禁用，该类仍然存在。这使您可以编写轻松针对任一条件的 CSS。no-jsjs

来自Modernizrs 的注释来源 （不再维护）：

从元素中删除“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（无样式内容的闪存）
  • 关注点分离等...
于 2012-09-13T16:22:46.290 回答
41

Modernizr.js 将删除no-js该类。

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

于 2011-07-17T14:37:12.503 回答
17

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

于 2011-07-17T14:38:04.853 回答
13

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

}
于 2014-08-01T05:40:09.027 回答
5

查看 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-jsclass 并将其替换为 classPrefix + js。

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

于 2017-06-10T09:27:39.833 回答
1

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

根据Modernizr 文档：

没有js

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

于 2018-10-31T19:58:10.697 回答