gpt4 book ai didi

javascript - 实现不显眼的 Javascript

转载 作者:行者123 更新时间:2023-11-30 10:44:42 25 4
gpt4 key购买 nike

我正在改造一个旧网站,并专注于使 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com