Question

HTML中是否有标记只在启用JavaScript时才会显示其内容？我知道<noscript>以相反的方式工作，在JavaScript关闭时显示其HTML内容。但是我想只在JavaScript可用的情况下在网站上显示一个表单，告诉他们如果没有表单就不能使用该表单。

我知道如何执行此操作的唯一方法是使用脚本标记中的document.write();方法，对于大量HTML来说，它似乎有些混乱。

Answer 1

我能想到的最简单方法：

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

Answer 2

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

Answer 3

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

现在，如果你正在使用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，它仍会显示。

Answer 4

我真的不同意这里关于预先嵌入HTML并用CSS隐藏它直到它再次用JS显示的所有答案。即使没有启用JavaScript，该节点仍然存在于DOM中。没错，大多数浏览器（甚至是可访问性浏览器）都会忽略它，但它仍然存在，并且可能会有奇怪的时间再次咬你。

我首选的方法是使用jQuery生成内容。如果它将是很多内容，那么你可以将它保存为HTML片段（只是你想要显示的HTML而没有html，body，head等标签）然后使用jQuery的ajax函数将其加载到整页。

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

Answer 5

我有一个简单而灵活的解决方案，有点类似于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选择器，直到从主体元素中删除“jsOff”类）。 / p>

这还可以提供仅js样式（例如.jsOn .someClass{}）和no-js-only样式（例如.jsOff .someOtherClass{}）的机制。您可以使用它来提供<noscript>的替代方法：

.jsOn .noJsOnly{
    display:none;
}

Answer 6

您还可以使用Javascript从其他源文件加载内容并输出。这可能比你想要的更黑盒子了。

Answer 7

以下是隐藏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调整它，但你明白了。）

Answer 8

我的解决方案

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

Answer 9

Alex's article在这里浮现在脑海中，但它只适用于你使用ASP.NET - 它可以用JavaScript模拟但是你必须再次使用document.write（）;

Answer 10

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

然后在'onload'功能中，您可以将可见性设置为'visible'。

类似的东西：

＆lt; body onload =“javascript：document.getElementById（rec）.style.visibility = visible”＆gt; ＆lt; p style =“visibility：visible”id =“rec”＆gt;除非javascript可用，否则此文字将被隐藏。＆lt; / p＆gt;

Answer 11

没有标签。您需要使用javascript来显示文本。

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

Answer 12

在提出此问题以来的十年中，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>

是否有与<noscript>相反的HTML？</noscript>

12 个答案:

的test.html

_test.html

结果