本文共 4348 字，大约阅读时间需要 14 分钟。
本文翻译自：
I notice that in a lot of template engines, in the , in various frameworks and in plain php sites there is the no-js class added onto the <HTML> tag. 我注意到在很多模板引擎中，在 ，在各种框架和普通的php站点中，在<HTML>标记上添加了no-js类。
Why is this done? 为什么这样做？ Is there some sort of default browser behavior that reacts to this class? 是否存在某种对此类做出反应的默认浏览器行为？ Why include it always? 为什么总是包括它？ Does that not render the class itself obsolete, if there is no no-"no-js" case and html can be addressed directly? 如果没有no-“no-js”情况并且html可以直接解决，那么这不会使类本身过时吗？
Here is an example from the HTML5 Boilerplate index.html: 以下是HTML5 Boilerplate index.html中的示例：
As you can see, the <html> element will always have this class. 如您所见， <html>元素将始终具有此类。 Can someone explain why this is done so often? 有人可以解释为什么经常这样做吗？
参考：
The no-js class is used by the feature detection library. 特征检测库使用no-js类。 When Modernizr loads, it replaces no-js with js . 当Modernizr加载时，它用no-js替换no-js js 。 If JavaScript is disabled, the class remains. 如果禁用JavaScript，则该类仍然存在。 This allows you to write CSS which easily targets either condition. 这允许您编写容易针对任一条件的CSS。
From : 来自 ：
Remove "no-js" class from element, if it exists:
docElement.className=docElement.className.replace(/\\bno-js\\b/,'') + ' js';从元素中删除“no-js”类（如果存在）：docElement.className=docElement.className.replace(/\\bno-js\\b/,'') + ' js';
Here is a blog post by Paul Irish describing this approach: 以下是Paul Irish撰写的博客文章，描述了这种方法： ：
I like to do this same thing, but without Modernizr. 我喜欢做同样的事情，但没有Modernizr。 I put the following <script> in the <head> to change the class to js if JavaScript is enabled. 我把下面<script>在<head>更改类js如果启用JavaScript。 I prefer to use .replace("no-js","js") over the regex version because its a bit less cryptic and suits my needs. 我喜欢在正则表达式版本上使用.replace("no-js","js") ，因为它不那么神秘，适合我的需要。
Prior to this technique, I would generally just apply js-dependant styles directly with JavaScript. 在此技术之前，我通常只使用JavaScript直接应用js依赖样式。 For example: 例如：
$('#someSelector').hide();$('.otherStuff').css({'color' : 'blue'}); With the no-js trick, this can Now be done with css : 使用no-js技巧，现在可以用css完成：
.js #someSelector {display: none;}.otherStuff { color: blue; }.no-js .otherStuff { color: green } This is preferable because: 这是更可取的，因为：
This is not only applicable in Modernizer. 这不仅适用于Modernizer。 I see some site implement like below to check whether it has javascript support or not. 我看到一些网站实现如下，以检查它是否有JavaScript支持。
...
If javascript support is there, then it will remove no-js class. 如果有javascript支持，那么它将删除no-js类。 Otherwise no-js will remain in the body tag. 否则no-js将保留在body标签中。 Then they control the styles in the css when no javascript support. 然后，当没有javascript支持时，他们控制css中的样式。
.no-js .some-class-name {} Look at the source code in Modernizer, this section: 查看Modernizer中的源代码，本节：
// Change `no-js` to `js` (independently of the `enableClasses` option)// Handle classPrefix on this tooif (Modernizr._config.enableJSClass) { var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)'); className = className.replace(reJS, '$1' + classPrefix + 'js$2');} So basically it search for classPrefix + no-js class and replace it with classPrefix + js . 所以基本上它搜索classPrefix + no-js类并用classPrefix + js替换它。
And the use of that, is styling differently if JavaScript not running in the browser. 如果JavaScript没有在浏览器中运行，那么使用它会有不同的样式。
The no-js class is used to style a webpage, dependent on whether the user has JS disabled or enabled in the browser. no-js类用于设置网页样式，具体取决于用户是否在浏览器中禁用了JS或启用了JS。
As per the : 根据 ：
no-js 无JS
By default, Modernizr will rewrite
<html class="no-js"> to <html class="js">. 默认情况下，Modernizr会将<html class="no-js"> to <html class="js">重写<html class="no-js"> to <html class="js">。 This lets hide certain elements that should only be exposed in environments that execute JavaScript. 这样可以隐藏只应在执行JavaScript的环境中公开的某些元素。 If you want to disable this change, you can set enableJSClass to false in your config. 如果要禁用此更改，可以在配置中将enableJSClass设置为false。
Modernizr.js will remove the no-js class. Modernizr.js将删除no-js类。
This allows you to make CSS rules for .no-js something to apply them only if Javascript is disabled. 这允许您为.no-js something制作CSS规则，只有在禁用Javascript时才能应用它们。
转载地址：http://juexb.baihongyu.com/