blocks|key|437420|text|基本上，可以在html元素中插入一个类"no-js“，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|437421|<html+class="no-js"+lang="en">|code-block|syntax|javascript|437422|如果在客户端启用了javascript，您很快就会删除该类(使用modernizr或更简单的代码片段，如|437423|<head>
++++<script>
++++(function(d)+{+
+++++++++d.className+=+d.className.replace(/(%5E%7C\b)no-js(\b%7C$)/,+'js');
++++}(document.documentElement));
++++</script>
++++...
</head>|437424|这样，您就可以在css规则中简单地使用.no-js和.js类来避免FOUC+(flash+of+unstyled+content)，如下所示：|437425|.yourlistitems+{+
+++display:+block;+
}
.js+.yourlistitems+{+
+++display:+none;+
}|437426|H5BP也使用这种方法|437427|请注意，您并不真正需要在每个规则中添加.no-js类:从“渐进式增强”和“不显眼的javascript”的角度考虑，您将首先为同样可以在没有javascript的情况下工作的页面编写代码和样式，然后添加功能(以及特定于样式的.js类)。|437428|entityMap|0|LINK|mutability|MUTABLE|url|http://www.modernizr.com/|1|http://paulirish.com/2009/avoiding-the-fouc-v3/|2|http://html5boilerplate.com/^0|7|4|0|0|W|9|0|0|0|J|6|Q|3|X|W|1|0|0|0|4|2|0|J|6|34|3|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|M|3|N|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|Q|3|R|5|H|7|1P|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|U|3|V|5|6|7|1U|8|@$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|Z|10|11|E|$12|17]]]]

<p>basically you can insert a class "no-js" in your <code>html</code> element, like so</p>

<pre><code>&lt;html class="no-js" lang="en"&gt;
</code></pre>

<p>and if javascript is enabled on the client you soon remove that class (using <a href="http://www.modernizr.com/" rel="nofollow">modernizr</a> or a simpler code snippet like</p>

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

<p>in this way you can avoid the <a href="http://paulirish.com/2009/avoiding-the-fouc-v3/" rel="nofollow">FOUC (flash of unstyled content)</a> simply using <code>.no-js</code> and <code>.js</code> class in the css rules like so:</p>

<pre><code>.yourlistitems { 
   display: block; 
}
.js .yourlistitems { 
   display: none; 
}
</code></pre>

<p>this approach is also used by <a href="http://html5boilerplate.com/" rel="nofollow">H5BP</a> <br>
Note that you don't really need to prepend <code>.no-js</code> class to each rule: thinking in terms of "progressive enhancement" and "unobtrusive javascript" you will code and style first for a page that also works without javascript, then you will add functionality (and style specificity, prepending the <code>.js</code> class)</p>


blocks|key|4475642|text|你有没有想过使用一种类似于用现代实现的方法？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4475643|CSS类是由一个脚本添加到HTML标签中的，该脚本会使不同的CSS选择器匹配。|4475644|<html>
<head>
++++
++++<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>|code-block|syntax|javascript|4475645|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Have you thought about using a method like the one implemented with Modernizr?</p>

<p>CSS classes are added to the HTML tag by a script that causes different CSS selectors to match.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;!--
    Putting this script in the head adds the "js" 
    class to the html element before the page loads.
    --&gt;
    &lt;script type="text/javascript" language="javascript"&gt;
        document.documentElement.className = "js";
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        /*
        Only apply the hidden style to elements within the HTML element
        that has the js class
        */
        .js .description {display:none;}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;span class="description"&gt;Example&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|4475674|text|我不知道这是否真的有帮助，因为潜在的异步操作，但您可以添加一个<script>，它在您的<style>+with+display:+(block%7Cinline%7Cwhatever)之前，您可以使用普通的JS切换到none+!important的所有相关显示，而不是jQuery。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4475675|因此，在JS的情况下，CSS显示设置将被预先覆盖。|4475676|entityMap^0|V|8|18|19|2X|F|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

<p>Can't tell if this really helps because of potential asynchronous operations but you might add a <code>&lt;script&gt;</code> which prepends your <code>&lt;style&gt; with display: (block|inline|whatever)</code> in which you toggle all relevant display to <code>none !important</code> by using plain JS, not jQuery.</p>

<p>So in case of JS the CSS display setting will be overridden beforehand.</p>


<p>I'm reworking an old website and am focusing on making the Javascript/jQuery as unobtrusive as possible. I'm looking for some advice on one part of the project: UJ requires that, if Javascript is turned off in a browser, all the site content is still available to the user. One part of my site has a large list of items. Each item in the list has it's own description, which uses CSS display:none to hide it by default. Clicking on the item toggles the visibility of the description using jQuery .toggle():, so a person unable to use Javascript (for whatever reason) would never see it. If I use Javascript/jQuery rather than CSS to hide the descriptions, they are all momentarily visible when the page loads, which I want to avoid. So what's the best solution?</p>


Implementing Unobtrusive Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在修改一个旧的网站，并且专注于让Javascript/jQuery尽可能的不引人注目。我正在寻找一些关于项目的一部分的建议: UJ要求，如果Javascript在浏览器中被关闭，所有网站内容仍然对用户可用。我网站的一部分有一个很大的项目列表。列表中的每个项目都有自己的描述，默认情况下使用CSS display:no...

问实现不引人注意的Javascript
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现不引人注意的JavascriptEN