Javascript HTML“no-js”类的目的是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6724515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the purpose of the HTML "no-js" class?
提问by Swader
I notice that in a lot of template engines, in the HTML5 Boilerplate, in various frameworks and in plain php sites there is the no-jsclass added onto the <HTML>tag.
我注意到在很多模板引擎中，在HTML5 Boilerplate 中，在各种框架和普通的 php 站点中，都将no-js类添加到<HTML>标签中。
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 中的示例：
<!--[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]-->
As you can see, the <html>element will always have this class.
Can someone explain why this is done so often?
如您所见，<html>元素将始终具有此类。有人可以解释为什么经常这样做吗？
采纳答案by Gregory Pakosz
When Modernizr runs, it removes the "no-js" class and replaces it with "js". This is a way to apply different CSS rules depending on whether or not Javascript support is enabled.
当 Modernizr 运行时，它会删除“no-js”类并将其替换为“js”。这是一种根据是否启用 Javascript 支持来应用不同 CSS 规则的方法。
请参阅Modernizer 的源代码。
回答by Zach Lysobey
The no-jsclass is used by the Modernizrfeature detection library. When Modernizr loads, it replaces no-jswith js. If JavaScript is disabled, the class remains. This allows you to write CSS which easily targets either condition.
该no-js班是由使用的Modernizr功能检测库。当 Modernizr 加载时，它会替换no-js为js. 如果 JavaScript 被禁用，该类将保留。这允许您编写可轻松针对任一条件的 CSS。
From Modernizrs' Anotated Source(no longer maintained):
来自Modernizrs 的 Anotated Source （不再维护）：
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: http://www.paulirish.com/2009/avoiding-the-fouc-v3/
这是 Paul Irish 的一篇博客文章，描述了这种方法：http: //www.paulirish.com/2009/avoiding-the-fouc-v3/
I like to do this same thing, but without Modernizr.
I put the following <script>in the <head>to change the class to jsif JavaScript is enabled. I prefer to use .replace("no-js","js")over the regex version because its a bit less cryptic and suits my needs.
我喜欢做同样的事情，但没有 Modernizr。我把下面<script>的<head>给类更改为js是否启用JavaScript。我更喜欢使用.replace("no-js","js")正则表达式版本，因为它不那么神秘并且适合我的需要。
<script>
document.documentElement.className =
document.documentElement.className.replace("no-js","js");
</script>
Prior to this technique, I would generally just apply js-dependant styles directly with JavaScript. For example:
在使用此技术之前，我通常只会直接使用 JavaScript 应用依赖于 js 的样式。例如：
$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});
With the no-jstrick, 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:
这是可取的，因为：
- It loads faster with no FOUC (flash of unstyled content)
- Separation of concerns, etc...
- 它加载速度更快，没有 FOUC（无样式内容的闪光）
- 关注点分离等...
回答by SLaks
Modernizr.js will remove the no-jsclass.
Modernizr.js 将删除no-js该类。
This allows you to make CSS rules for .no-js somethingto apply them only if Javascript is disabled.
这允许您制定 CSS 规则，.no-js something以便仅在禁用 Javascript 时应用它们。
回答by marc
The no-jsclass gets removed by a javascript script, so you can modify/display/hide things using css if js is disabled.
该no-js班获得由JavaScript的脚本文件删除，这样你就可以修改/显示/隐藏的东西使用CSS，如果JS被禁用。
回答by Fizer Khan
This is not only applicable in Modernizer. I see some site implement like below to check whether it has javascript support or not.
这不仅适用于 Modernizer。我看到一些像下面这样的网站工具来检查它是否有 javascript 支持。
<body class="no-js">
<script>document.body.classList.remove('no-js');</script>
...
</body>
If javascript support is there, then it will remove no-jsclass. Otherwise no-jswill remain in the body tag. Then they control the styles in the css when no javascript support.
如果有 javascript 支持，那么它将删除no-js类。否则no-js会留在body标签中。然后他们在没有 javascript 支持时控制 css 中的样式。
.no-js .some-class-name {
}
回答by Alireza
Look at the source code in Modernizer, this section:
查看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, '' + classPrefix + 'js');
}
So basically it search for classPrefix + no-jsclass and replace it with classPrefix + js.
所以基本上它搜索 classPrefix + no-jsclass 并将其替换为 classPrefix + js。
And the use of that, is styling differently if JavaScript not running in the browser.
如果 JavaScript 不在浏览器中运行，那么使用它的样式会有所不同。
回答by JSON C11
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。
As per the Modernizr docs:
根据Modernizr 文档：
no-js
By default, Modernizr will rewrite
<html class="no-js"> to <html class="js">. This lets hide certain elements that should only be exposed in environments that execute JavaScript. If you want to disable this change, you can set enableJSClass to false in your config.
没有js
默认情况下，Modernizr 将重写
<html class="no-js"> to <html class="js">. 这可以隐藏某些只应在执行 JavaScript 的环境中公开的元素。如果要禁用此更改，可以在配置中将 enableJSClass 设置为 false。
