是否存在与 < noscript > 相反的 HTML？

小开

最佳答案

当页面加载时，可以通过 JavaScript 显示一个不可见的 div。

小开

您还可以使用 Javascript 从另一个源文件加载内容并输出。这个黑匣子可能比你想要的要多一些。

小开

Alex 的文章出现在这里，但是它只适用于使用 ASP.NET 的情况-它可以在 JavaScript 中模拟，但是你必须使用 document.write () ;

小开

你可以将段落的可见性设置为“隐藏”。

然后在“ onload”函数中，您可以将可见性设置为“ visible”。

比如:

< body onload = “ javascript: document.getElementById (rec) . style.vision = visible”> 除非 javascript 可用，否则此文本将被隐藏

小开

这里没有标签，你需要使用 javascript 来显示文本。

有些人已经建议使用 JS 来动态设置可见的 CSS。您还可以使用 document.getElementById(id).innerHTML = "My Content"动态生成文本或动态创建节点，但 CSS 技巧可能是最容易阅读的。

小开

下面是一个隐藏 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 进行调整，但你已经明白了。)

小开

我能想到的最简单的方法是:

<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。

小开

首先，始终将内容、标记和行为分开！

现在，如果您正在使用 jQuery 库(您确实应该这样做，它使 JavaScript 变得更加简单) ，下面的代码应该这样做:

$(document).ready(function() {
$("body").addClass("js");
});

这将在启用 JS 时为主体提供一个额外的类。现在，在 CSS 中，您可以在 JS 类不可用时隐藏该区域，并在 JS 可用时显示该区域。

或者，您可以将 no-js作为默认类添加到 body 标记中，并使用以下代码:

$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});

请记住，如果禁用 CSS，它仍将显示。

小开

关于预先嵌入 HTML 并用 CSS 隐藏它，直到再次用 JS 显示它的问题，我并不完全同意这里的所有答案。即使启用了 JavaScript，该节点仍然存在于 DOM 中。的确，大多数浏览器(甚至是可访问性浏览器)都会忽略它，但它仍然存在，而且可能会在某些时候反咬一口。

My preferred method would be to use jQuery to generate the content. If it will be a lot of content, then you can save it as an HTML fragment (just the HTML you will want to show and none of the html, body, head, etc. tags) then use jQuery's ajax functions to load it into the full page.

Test.html

<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>

_ test.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>

小开

我有一个简单而灵活的解决方案，有点类似于 Will 的解决方案(但附加的好处是有效的 html) :

Give the body element a class of "jsOff". Remove (or replace) this with JavaScript. Have CSS to hide any elements with a class of "jsOnly" with a parent element with a class of "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;
}

小开

My solution

。 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属性被添加到了 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>