HTML“no-js”的目的是什么?课吗?

我注意到在许多模板引擎中，在HTML5样板中，在各种框架中，在普通的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>元素总是有这个类。 有人能解释一下为什么这种情况如此频繁吗?< / p >
260515 次浏览
小开

Modernizr.js将删除no-js类。

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

小开
最佳答案

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

看到# EYZ0。

小开

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

小开

no-js类由Modernizr特性检测库使用。当Modernizr加载时，它将no-js替换为js。如果JavaScript被禁用，该类将保留。这使您可以轻松地针对这两种情况编写CSS。

Modernizrs的注释源 (不再维护):

从元素中删除"no-js"类，如果它存在: # EYZ0 < / p >

下面是Paul Irish的一篇博客文章，描述了这种方法: # EYZ0 < / p >
我喜欢做同样的事情，但是没有Modernizr。 我将下面的<script>放在<head>中，如果启用JavaScript，则将类更改为js。我更喜欢使用.replace("no-js","js")而不是regex版本，因为它不那么神秘，适合我的需要 
<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(无样式内容的flash)
  • 分离关注点，等等……
小开

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


}
小开

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

小开

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

根据Modernizr文档:

# EYZ0

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


提交答案