实现不引人注意的Javascript
我正在修改一个旧的网站，并且专注于让Javascript/jQuery尽可能的不引人注目。我正在寻找一些关于项目的一部分的建议: UJ要求，如果Javascript在浏览器中被关闭，所有网站内容仍然对用户可用。我网站的一部分有一个很大的项目列表。列表中的每个项目都有自己的描述，默认情况下使用CSS display:none来隐藏它。单击该项目将使用jQuery .toggle()：切换描述的可见性，因此无法使用Javascript (无论出于何种原因)的人将永远看不到它。如果我使用Javascript/jQuery而不是CSS来隐藏描述，当页面加载时，它们都是瞬间可见的，这是我想要避免的。那么最好的解决方案是什么呢？
回答 3
Stack Overflow用户
发布于 2012-01-30 19:13:29
基本上，可以在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>这样，您就可以在css规则中简单地使用.no-js和.js类来避免FOUC (flash of unstyled content)，如下所示：
.yourlistitems {
display: block;
}
.js .yourlistitems {
display: none;
}H5BP也使用这种方法
请注意，您并不真正需要在每个规则中添加.no-js类:从“渐进式增强”和“不显眼的javascript”的角度考虑，您将首先为同样可以在没有javascript的情况下工作的页面编写代码和样式，然后添加功能(以及特定于样式的.js类)。
Stack Overflow用户
发布于 2012-01-30 19:13:49
你有没有想过使用一种类似于用现代实现的方法？
CSS类是由一个脚本添加到HTML标签中的，该脚本会使不同的CSS选择器匹配。
<html>
<head>
<!--
Putting this script in the head adds the "js"
class to the html element before the page loads.
-->
<script type="text/javascript" language="javascript">
document.documentElement.className = "js";
</script>
<style type="text/css">
/*
Only apply the hidden style to elements within the HTML element
that has the js class
*/
.js .description {display:none;}
</style>
</head>
<body>
<span class="description">Example</span>
</body>
</html>Stack Overflow用户
发布于 2012-01-30 19:17:18
我不知道这是否真的有帮助，因为潜在的异步操作，但您可以添加一个<script>，它在您的<style> with display: (block|inline|whatever)之前，您可以使用普通的JS切换到none !important的所有相关显示，而不是jQuery。
因此，在JS的情况下，CSS显示设置将被预先覆盖。
https://stackoverflow.com/questions/9062811
复制相似问题
腾讯云开发者
