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

2020/09/25 07:01 · javascript ·  · 0评论

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

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

请参阅Modernizer的源代码

no-js班是由使用的Modernizr功能检测库。加载Modernizr后,将替换no-jsjs如果禁用JavaScript,则保留该类。这使您可以编写轻松针对任一条件的CSS。

来自Modernizrs的注释源 (不再维护)

从元素中删除“ no-js”类(如果存在):
docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

这是保罗·爱尔兰(Paul Irish)撰写的博客文章,描述了这种方法:http :
//www.paulirish.com/2009/avoiding-the-fouc-v3/


我喜欢做同样的事情,但是没有Modernizr。我将以下内容添加<script>到中,<head>以将类更改为js是否启用了JavaScript。我更喜欢使用.replace("no-js","js")正则表达式版本,因为它的神秘性较低,可以满足我的需求。

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

在使用此技术之前,我通常只将JavaScript依赖的样式直接应用于JavaScript。例如:

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

有了这个no-js技巧,现在可以使用css

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

这是优选的,因为:

  • 没有FOUC(未样式化内容的闪烁),加载速度更快
  • 关注点分离等

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

这样,您可以制定CSS规则,.no-js something以仅在禁用Javascript时才应用它们。

no-js班获得由JavaScript的脚本文件删除,这样你就可以修改/显示/隐藏的东西使用CSS,如果JS被禁用。

这不仅适用于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-jsclass并将其替换为classPrefix + js

如果浏览器中未运行JavaScript,则使用的样式会有所不同。

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

根据Modernizr docs

无js

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

本文地址:http://javascript.askforanswer.com/html-no-jsleidemudeshishenme.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!