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

JS

的文章如下：

HTML "no-JS" 类的目的及案例代码

HTML中的“no-JS”类用于向网页的样式表提供指示，以便在浏览器不支持JavaScript或用户已禁用JavaScript时进行样式的修饰。该类的目的是为了提供一种优雅的降级机制，以确保即使在没有JavaScript支持的情况下，网页仍能提供基本的可读性和用户体验。

案例代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>No JavaScript Example</title>
  <style>
    .no-JS {
      display: none;
    }
    .contAIner {
      background-color: #f1f1f1;
      padding: 20px;
      text-align: center;
      font-size: 18px;
    }
  </style>
  <script>
    document.documentElement.classList.remove("no-JS");
    document.documentElement.classList.add("JS");
  </script>
</head>
<body>
  <div class="contAIner no-JS">
    <h1>Welcome to our website!</h1>
    
This website is designed to work with JavaScript enabled. Please enable JavaScript in your browser settings to experience the full functionality of this site.
  </div>
  <div class="contAIner JS">
    <h1>Welcome to our website!</h1>
    
<img src="https://img.izhida.com/topic/d52387880e1ea22817a72d3759213819.jpg" alt="Java"><br>Java
Thank you for enabling JavaScript. You can now enjoy the interactive features and enhanced user experience of this site.
  </div>
</body>
</html>

为什么使用“no-JS”类

在上述案例代码中，我们可以看到在HTML的根元素（）上添加了一个名为“no-JS”的类。这个类的作用是在浏览器不支持JavaScript或用户禁用了JavaScript时，通过CSS来隐藏一部分内容，以提供更好的用户体验。

如何应用“no-JS”类

要应用“no-JS”类，我们可以使用JavaScript来操作DOM，将“no-JS”类移除，并添加一个“JS”类。在上述案例代码中，我们通过以下代码实现了这一功能：

Javascript
document.documentElement.classList.remove("no-JS");
document.documentElement.classList.add("JS");

这样一来，当JavaScript被启用时，我们有两个具有相同样式的容器元素，但只有一个会显示出来。如果浏览器不支持JavaScript，或者用户禁用了JavaScript，只有带有“no-JS”类的容器元素会显示，以向用户提供相关信息和建议。

通过使用“no-JS”类，我们可以为没有JavaScript支持的浏览器提供一种优雅的降级方案，确保网页在各种环境下都能提供基本的可读性和用户体验。这种技术对于保证网站的可访问性和可持续性发展非常重要。