首页>建站相关>html元素中的“no-js”类有什么用

html元素中的“no-js”类有什么用

学习看typecho的默认主题,在html元素中规定了“no-js”这样一个类,搜索了一下,该类的主要目的是允许使用 CSS 来设置无 JavaScript 页面的样式,即为启用 JavaScript 的浏览器和禁用 JavaScript 的浏览器定义 CSS 样式。

<html class="no-js">

关于“no-js”类

  • “no-js”类只有在 JavaScript 被禁用时才会出现,这可以在不使用任何客户端脚本的情况下为纯 HTML 和 CSS 页面设置样式;
  • 但是如果启用了 JavaScript,它会自动删除“no-js”类;
  • 默认情况下,“no-js”类在标记中可用;
  • “no-js” 类基本上是一种能够使用或不使用 JavaScript 来设置样式的方法;
  • “no-js”类被添加到最顶层的 html 元素中,作为 Modernizr 的指令。

代码示例

<!DOCTYPE html>
<html class="no-js">
<head>
    <script>document.documentElement.className
        = document.documentElement.className
        .replace(/bno-jsb/g, '') + 'js';
    </script>

    <!-- Other files and libraries
        to be included -->
    <head>
    <body>
        <center>
            <h1>虾比比博客</h1>
        </center>
    </body>
</html>

在支持js的浏览器中,默认的“no-js”类会被后面的js语句替换为“js”,根据不同的类名,我们可以展示不同的内容,比如用于控制一个提醒用户开启js功能的通知的开闭。

Modernizr库

“no-js”往往会配合Modernizr使用,Modernizr 是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性。使用炫酷新颖的 web 技术是一件很有趣的事情,但你不得不面对落后的浏览器。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。

标签: html

移动端可扫我直达哦~

推荐阅读

html 2022-10-28

html元素中的data-*属性

data-全局属性是一类被称为自定义数据属性的属性,它赋予我们在所有HTML元素上嵌入自定义数据属性的能力,并可以通过脚本在HTML与DOM表现之间进行专有数据的交换。通过添加 data- 属性,即使是普通的 HTML 元素也能变成相...

建站相关 html

html 2022-10-13

浏览器内核控制标签renderer说明

背景介绍由于众所周知的原因,国内的主流浏览器都是双核浏览器:基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。以360浏览器为例,我们优先通过Webkit内核渲染主流网站,只...

建站相关 html

html 2022-10-13

html中meta标签的http-equiv属性

学习typecho的默认主题,才看到header.php文件的第六行代码,就被这样一句代码弄懵了。http-equiv属性提供了content属性的信息/值的HTTP头,也就是说,这东西是成对使用的,使用http-equiv属性可用于...

建站相关 html