是否有与

发布于 2024-07-04 00:24:17 字数 291 浏览 10 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残月升风 2024-07-11 00:24:17

亚历克斯的文章这里突然想到，但是它仅适用于您使用 ASP.NET - 它可以在 JavaScript 中模拟，但是您必须再次使用 document.write();

回复收藏 0 原文

流云如水 2024-07-11 00:24:17

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

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

类似于：

除非 JavaScript 可用，否则该文本将被隐藏。

回复收藏 0 原文

夏至、离别 2024-07-11 00:24:17

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

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

回复收藏 0 原文

怪异←思 2024-07-11 00:24:17

我的解决方案

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

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>

回复收藏 0 原文

南七夏 2024-07-11 00:24:17

这是隐藏 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 进行调整，但您明白了。）

Here's an example for the hidden div way:

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

(You'd probably have to tweak it for poor IE, but you get the idea.)

回复收藏 0 原文

生生不灭 2024-07-11 00:24:17

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

回复收藏 0 原文

玩物 2024-07-11 00:24:17

自从提出这个问题以来的十年里，隐藏 属性已添加到 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>

In the decade since this question was asked, the HIDDEN attribute was added to HTML. It allows one to directly hide elements without using CSS. As with CSS-based solutions, the element must be un-hidden by script:

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

回复收藏 0 原文

只有影子陪我不离不弃 2024-07-11 00:24:17

我有一个简单而灵活的解决方案，有点类似于 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{}）的机制。您可以使用它来提供的替代方案：

.jsOn .noJsOnly{
    display:none;
}

I have a simple and flexible solution, somewhat similar to Will's (but with the added benefit of being valid 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".

This means that if JavaScript is enabled, the "jsOff" class will be removed from the body. This will mean that elements with a class of "jsOnly" will not have a parent with a class of "jsOff" and so will not match the CSS selector that hides them, thus they will be shown.

If JavaScript is disabled, the "jsOff" class will not be removed from the body. Elements with "jsOnly" will have a parent with "jsOff" and so will match the CSS selector that hides them, thus they will be hidden.

Here's the code:

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

It's valid html. It is simple. It's flexible.

Just add the "jsOnly" class to any element that you want to only display when JS is enabled.

Please note that the JavaScript that removes the "jsOff" class should be executed as early as possible inside the body tag. It cannot be executed earlier, as the body tag will not be there yet. It should not be executed later as it will mean that elements with the "jsOnly" class may not be visible right away (as they will match the CSS selector that hides them until the "jsOff" class is removed from the body element).

This could also provide a mechanism for js-only styling (e.g. .jsOn .someClass{}) and no-js-only styling (e.g. .jsOff .someOtherClass{}). You could use it to provide an alternative to <noscript>:

.jsOn .noJsOnly{
    display:none;
}

回复收藏 0 原文

花开雨落又逢春i 2024-07-11 00:24:17

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

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

First of all, always separate content, markup and behaviour!

Now, if you're using the jQuery library (you really should, it makes JavaScript a lot easier), the following code should do:

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

This will give you an additional class on the body when JS is enabled.
Now, in CSS, you can hide the area when the JS class is not available, and show the area when JS is available.

Alternatively, you can add no-js as the the default class to your body tag, and use this code:

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

Remember that it is still displayed if CSS is disabled.

回复收藏 0 原文

总攻大人 2024-07-11 00:24:17

我不太同意这里关于预先嵌入 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>

I don't really agree with all the answers here about embedding the HTML beforehand and hiding it with CSS until it is again shown with JS. Even w/o JavaScript enabled, that node still exists in the DOM. True, most browsers (even accessibility browsers) will ignore it, but it still exists and there may be odd times when that comes back to bite you.

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>

result

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

回复收藏 0 原文

┈┾☆殇 2024-07-11 00:24:17

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

回复收藏 0 原文

萌吟 2024-07-11 00:24:17

我能想到的最简单的方法：

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

Easiest way I can think of:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

No document.write, no scripts, pure CSS.

回复收藏 0 原文

~没有更多了~