[正文内容]

我一直在尽力确保这个网站即使在没有 JavaScript 的情况下也能很好地工作（或者至少是合理地好）。但是，当 JavaScript 不可用时，隐藏需要它的东西可能会有点麻烦。只需 7 行代码（或者如果你很厉害，可以用一行代码），你就可以轻松地隐藏需要 JavaScript 的元素，这样你就不会看到那些对禁用 JavaScript 的用户来说功能已经损坏的部分。

为了方便理解，我正在开发一个小的分享按钮，我可以将其添加到我的文章中，以便让你更轻松地分享我的文章。下面是一个没有 JavaScript 的例子：

Screenshot snippet showing a share SVG icon next to the permalink for the post

虽然它看起来不 难看 ，但当启用 JavaScript 时，链接是不必要的，而当禁用 JavaScript 时，SVG 是不必要的。我希望在启用 JavaScript 时只显示 SVG 作为一个可以按下的按钮，并在禁用 JavaScript 时只显示链接，以便更容易复制/粘贴。

如果你还不熟悉，后一部分很容易用 <noscript> HTML 标签实现。此标签告诉浏览器仅在禁用 JavaScript 时才呈现其内容。因此，使链接仅在禁用 JavaScript 时显示就像将其包装在 <noscript> 标签中一样简单。

但是，如果你想让一个元素仅在启用 JavaScript 时出现，那就有点不太清楚了。没有 <onlyscript> 标签，并且 <script> 标签的含义与 <noscript> 标签的含义截然不同。

使用 JavaScript 指示 JavaScript 已启用

在我最初的方法中，我想也许我可以在 <head> 标签中添加一行 JavaScript 代码，如果 JavaScript 已启用，则运行该代码并将 js-enabled 添加到 <html> 元素上的类列表中。

这样做效果很好，然后我可以通过创建如下样式来以一种特殊的方式设置 JavaScript 启用时的样式：

.share-button {
  display: none;
}
.js-enabled .share-button {
  display: block;
}

但这感觉很笨拙。它导致需要为每个元素创建两个 CSS 规则，并且对于我仅仅在 JavaScript 未启用时隐藏东西的目标来说，这似乎有点过度。

如果你需要仅在启用 JavaScript 时进行更复杂的样式设置，这可能是一个有用的解决方案，但对于我的目的而言，它不够简单。

使用 noscript 覆盖特定元素

我想到的下一个解决方案是将 <noscript> 标签与站点标题中的 <style> 标签结合使用。然后，我可以简单地列出我不希望显示的元素，并将它们显式标记为 display:none;。它们仍然会出现在标记中，但这没关系，它们不应该妨碍任何人。

在你的站点标题中，你可以像平常一样简单地链接所有 CSS，然后添加以下代码片段来覆盖你不想在禁用 JavaScript 时显示的字段。在我的例子中，我隐藏了 .theme-toggle 和 .menu-trigger 类。这些与只有在启用 JavaScript 时才能工作的功能有关——三向主题切换器和移动设备上的汉堡菜单下拉菜单。

<noscript>
  <style>
    .theme-toggle {
      display: none;
    }
    .menu-trigger {
      display:none;
    }
  </style>
</noscript>

这还可以。它是显式的。它依赖于现有的浏览器行为，以便在 JavaScript 不可用时进行选择性的样式覆盖，因此你无需显式地设置 JS 启用和 JS 禁用情况的样式。但是，在开发新的渐进增强功能时，我不再喜欢这种模式了。网站变得越增强，这个覆盖列表就越长，并且如果更改类名，你必须确保始终保持其最新状态。

⭐ 使用 noscript 和一个 d-js-required 类

由于我们可以将任意数量的类附加到元素，因此我意识到使这种 noscript 样式尽可能简单更有意义。我们将简单地创建一个类 d-js-required，以指示需要启用 JavaScript 才能显示此元素。我们可以仅使用一个类来更新我们的 <noscript><style> 块，然后更新我们现有的元素以也使用此类。

<noscript>
  <style>
    .d-js-required {
      display: none;
    }
  </style>
</noscript>

因此，现在我们可以拥有任意数量的简单元素，这些元素仅在启用 JavaScript 时显示，而无需编写另一行 JavaScript，也无需维护不断增长的 CSS 覆盖列表。

我希望这能给你一些启发，为你提供解决渐进增强问题的创造性解决方案。如果启用了 JavaScript，你可以单击下面的共享按钮来共享此页面！如果没有，你可以复制下面的链接来共享此页面！