javascript - 实现不显眼的 Javascript-6ren

javascript - 实现不显眼的 Javascript

转载作者：行者123 更新时间：2023-11-30 10:44:42

我正在改造一个旧网站，并专注于使 Javascript/jQuery 尽可能不引人注目。我正在寻找有关元素一部分的一些建议:UJ 要求，如果在浏览器中关闭 Javascript，所有网站内容仍然对用户可用。我网站的一部分包含大量元素。列表中的每个元素都有自己的描述，默认情况下使用 CSS display:none 隐藏它。单击该元素会使用 jQuery .toggle(): 切换描述的可见性，因此无法使用 Javascript(无论出于何种原因)的人永远不会看到它。如果我使用 Javascript/jQuery 而不是 CSS 来隐藏描述，它们在页面加载时都会立即可见，我想避免这种情况。那么最好的解决方案是什么？

最佳答案

基本上你可以在你的 html 元素中插入一个类“no-js”，就像这样

<html class="no-js" lang="en">

如果在客户端上启用了 javascript，您很快就会删除该类(使用 modernizr 或更简单的代码片段，如

<head>
    <script>
    (function(d) { 
         d.className = d.className.replace(/(^|\b)no-js(\b|$)/, 'js');
    }(document.documentElement));
    </script>
    ...
</head>

这样你就可以避免FOUC (flash of unstyled content)在 css 规则中简单地使用 .no-js 和 .js 类:

.yourlistitems { 
   display: block; 
}
.js .yourlistitems { 
   display: none; 
}

H5BP 也使用了这种方法
请注意，您实际上不需要为每个规则添加 .no-js 类:从“渐进式增强”和“不显眼的 javascript”的 Angular 考虑，您将首先为页面编写代码和样式在没有 javascript 的情况下工作，然后您将添加功能(和样式特异性，在 .js 类之前添加)

关于javascript - 实现不显眼的 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9062811/

文章推荐： javascript - John Resig 的 perf 函数

文章推荐： Java RXTX - 通过串行通信检测正确的设备

文章推荐： javascript - 点击 IFRAME 的陷阱

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 实现不显眼的 Javascript