添加或删除类以进行渐进增强的最佳方法是什么？答案

【问题标题】：What is the best way to add or remove a class for progressive enhancement?添加或删除类以进行渐进增强的最佳方法是什么？
【发布时间】：2019-01-04 13:01:52
【问题描述】：

我正在开发一个使用最少 JS 的网站，主要用于在移动设备上切换菜单之类的。

如果 js 被禁用，我希望网站仍然可以导航。我提出了 2 个可行的解决方案，但我想知道一个是否比另一个更好，或者我是否应该做一些完全不同的事情。

哪个更好？

示例 A

<body>
 <noscript>
  <div class="no-js">
 </noscript>
 ... stuff here ...
 <noscript>
    </div>
</noscript>

或

示例 B

<body id="body" class="body no-js">
 ... stuff here ...
<script>document.getElementById("body").classList.remove("no-js");</script>
</body>

【问题讨论】：

标签： javascript html responsive-design progressive-enhancement

【解决方案1】：

示例 A 是无效的 HTML。

HTML 必须以严格的层次结构排列。

一个元素（例如你的<div>）不能作为一个元素（例如你的<noscript>）的子元素开始，除非在同一个<noscript>中也有匹配的结束标签。

去掉选项A，只剩下选项B。

【讨论】：

...选项 B 可以更简单：document.body.classList.remove("no-js"); 或 document.body.className = "";（以支持没有classList 的过时浏览器），在这两种情况下都从<body> 中删除id="body"。