HTML “no-js”类的目的是什么？

javascript html modernizr html5boilerplate

2022-08-29 23:00:58

我注意到，在很多模板引擎中，在HTML5样板中，在各种框架和普通的php站点中，都有添加到标签上的类。no-js<HTML>

为什么要这样做？是否存在对此类做出反应的某种默认浏览器行为？为什么总是包含它？如果没有no-“no-js”的情况，并且html可以直接解决，这难道不会使类本身过时吗？

下面是 HTML5 样板索引中的一个示例.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>

答案 1

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

请参阅 Modernizer 的源代码。

答案 2

该类由 Modernizr 特征检测库使用。当 Modernizr 加载时，它将替换为 .如果禁用了 JavaScript，则该类将保留。这允许您编写轻松针对任一条件的CSS。no-jsno-jsjs

来自 Modernizrs 的 Anotated Source （不再维护）：：

从元素中删除“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-jscss

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

这是可取的，因为：

它加载速度更快，没有FOUC（无样式内容的闪烁）
关注点分离等...