在没有 JavaScript 的情况下隐藏需要 JavaScript 的元素

主要观点:努力确保网站在无 JavaScript 时也能良好运行,无 JavaScript 时隐藏需 JavaScript 的东西会有点笨拙,用 7 行代码(或单行代码)可轻松隐藏需 JavaScript 的元素。介绍了在帖子中添加小分享按钮的示例,无 JavaScript 时显示的情况及存在的问题,如链接和 SVG 不必要等。
关键信息:

  • 介绍了用<noscript>标签在 JavaScript 禁用时显示某些元素,用<script>标签在 JavaScript 启用时添加类等方法及其优缺点。
  • 提出用d-js-required类来简化 noscript 样式,使只需 JavaScript 启用时才显示的元素更简单,无需写更多 JavaScript 代码和维护不断增长的 CSS 覆盖列表。
    重要细节:
  • 无 JavaScript 时分享按钮的截图示例。
  • 第一种方法中在<head>标签添加 JavaScript 来添加类并进行样式设置,但感觉笨拙。
  • 第二种方法结合<noscript><style>标签来覆盖特定元素的显示。
  • 最终提出用d-js-required类的方法及具体代码实现。
阅读 13
0 条评论