HTML 中是否存在仅在启用 JavaScript 时才显示其内容的标签？我知道<noscript> 以相反的方式工作，在关闭 JavaScript 时显示其 HTML 内容。但我只想在 JavaScript 可用的情况下在网站上显示一个表单，告诉他们为什么如果没有它就不能使用该表单。
我知道如何做到这一点的唯一方法是在脚本标记中使用document.write(); 方法，对于大量 HTML 来说似乎有点混乱。
【问题讨论】：
标签： javascript html noscript
我能想到的最简单的方法：
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
没有 document.write，没有脚本，纯 CSS。
【讨论】：
display: none !important，以防止它被更具体的规则（例如，通过 id 或 css 选择器）覆盖，这些规则旨在在启用脚本时使用。
<noscript> 内的标签。您需要点击重新加载两次才能使其工作。
你可以有一个不可见的 div，当页面加载时通过 JavaScript 显示。
【讨论】：
我并不完全同意这里关于预先嵌入 HTML 并用 CSS 隐藏它直到它再次用 JS 显示的所有答案。即使没有启用 JavaScript，该节点仍然存在于 DOM 中。诚然，大多数浏览器（甚至是无障碍浏览器）都会忽略它，但它仍然存在，并且可能会有奇怪的时候再次咬你。
我的首选方法是使用 jQuery 来生成内容。如果内容很多，那么您可以将其保存为 HTML 片段（只是您要显示的 HTML，没有 html、body、head 等标签），然后使用 jQuery 的 ajax 函数将其加载到整页。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.get('_test.html', function(html) {
$('p:first').after(html);
});
});
</script>
</head>
<body>
<p>This is content at the top of the page.</p>
<p>This is content at the bottom of the page.</p>
</body>
</html>
<p>This is from an HTML fragment document</p>
<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>
【讨论】：
首先，始终将内容、标记和行为分开！
现在，如果你正在使用 jQuery 库（你真的应该这样做，它让 JavaScript 变得更容易），下面的代码应该可以做到：
$(document).ready(function() {
$("body").addClass("js");
});
当启用 JS 时，这将在主体上为您提供一个额外的类。 现在，在 CSS 中，您可以在 JS 类不可用时隐藏该区域，并在 JS 可用时显示该区域。
或者，您可以将no-js 作为默认类添加到您的正文标签，并使用以下代码：
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
请记住，如果禁用 CSS，它仍然会显示。
【讨论】：
我有一个简单而灵活的解决方案，有点类似于 Will 的解决方案（但具有有效 html 的额外好处）：
给body元素一个“jsOff”类。用 JavaScript 删除（或替换）它。让 CSS 隐藏任何具有“jsOnly”类且父元素具有“jsOff”类的元素。
这意味着如果启用 JavaScript，“jsOff”类将从正文中删除。这意味着具有“jsOnly”类的元素将不会有一个具有“jsOff”类的父元素，因此不会匹配隐藏它们的 CSS 选择器，因此它们将被显示。
如果 JavaScript 被禁用，“jsOff”类不会从正文中删除。带有“jsOnly”的元素将有一个带有“jsOff”的父元素，因此将匹配隐藏它们的 CSS 选择器，因此它们将被隐藏。
代码如下：
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff','jsOn');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
这是有效的 html。很简单。它很灵活。
只需将“jsOnly”类添加到您希望仅在启用 JS 时才显示的任何元素。
请注意，删除“jsOff”类的 JavaScript 应尽早在 body 标记内执行。它不能更早地执行，因为body标签还没有。它不应稍后执行，因为这意味着具有“jsOnly”类的元素可能不会立即可见（因为它们将匹配隐藏它们的 CSS 选择器，直到从 body 元素中删除“jsOff”类）。
这也可以为仅 js 样式（例如 .jsOn .someClass{}）和非仅 js 样式（例如 .jsOff .someOtherClass{}）提供一种机制。您可以使用它来提供<noscript> 的替代方案：
.jsOn .noJsOnly{
display:none;
}
【讨论】：
您还可以使用 Javascript 从另一个源文件加载内容并输出。不过，这可能比您要寻找的要多一点。
【讨论】：
下面是一个隐藏div方式的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*[data-when-js-is-on] {
display: none;
}
</style>
<script>
document.getElementsByTagName("style")[0].textContent = "";
</script>
</head>
<body>
<div data-when-js-is-on>
JS is on.
</div>
</body>
</html>
（你可能不得不针对糟糕的 IE 进行调整，但你明白了。）
【讨论】：
我的解决方案
.css：
.js {
display: none;
}
.js：
$(document).ready(function() {
$(".js").css('display', 'inline');
$(".no-js").css('display', 'none');
});
.html:
<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>
【讨论】：
自从提出这个问题以来的十年里，HIDDEN attribute 被添加到 HTML 中。它允许不使用 CSS 直接隐藏元素。与基于 CSS 的解决方案一样，元素必须不被脚本隐藏：
<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>
【讨论】：
Alex's article 突然想到这里，但它仅适用于您使用 ASP.NET 的情况——它可以在 JavaScript 中模拟，但您必须再次使用 document.write();
【讨论】：
您可以将段落|div 的可见性设置为“隐藏”。
然后在“onload”函数中，您可以将可见性设置为“可见”。
类似：
除非 javascript 可用，否则此文本将被隐藏。
【讨论】：
没有标签。您需要使用 javascript 来显示文本。
已经有人建议使用 JS 来动态设置 CSS 可见。您还可以使用 document.getElementById(id).innerHTML = "My Content" 动态生成文本或动态创建节点，但 CSS hack 可能是最容易阅读的。
【讨论】：