118

Is there a tag in HTML that will only display its content if JavaScript is enabled? I know <noscript> works the opposite way around, displaying its HTML content when JavaScript is turned off. But I would like to only display a form on a site if JavaScript is available, telling them why they can't use the form if they don't have it.

The only way I know how to do this is with the document.write(); method in a script tag, and it seems a bit messy for large amounts of HTML.

4

12 に答える 12

233

私が考えることができる最も簡単な方法：

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

于 2009-01-10T19:06:51.333 に答える
63

You could have an invisible div that gets shown via JavaScript when the page loads.

于 2008-08-27T14:46:09.527 に答える
8

まず第一に、常にコンテンツ、マークアップ、および動作を分離してください！

ここで、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が無効になっている場合でも表示されることに注意してください。

于 2009-08-04T19:47:42.043 に答える
8

HTMLを事前に埋め込み、JSで再び表示されるまでCSSで非表示にすることについて、ここでのすべての回答に本当に同意するわけではありません。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>
于 2010-08-24T13:26:13.793 に答える
3

私はシンプルで柔軟なソリューションを持っています。これは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です。簡単です。柔軟性があります。

JSが有効になっている場合にのみ表示する要素に「jsOnly」クラスを追加するだけです。

「jsOff」クラスを削除するJavaScriptは、bodyタグ内でできるだけ早く実行する必要があることに注意してください。bodyタグがまだ存在しないため、以前に実行することはできません。「jsOnly」クラスの要素はすぐには表示されない可能性があるため、後で実行しないでください（「jsOff」クラスがbody要素から削除されるまで非表示にするCSSセレクターと一致するため）。

.jsOn .someClass{}これは、jsのみのスタイリング（例）と非jsのみのスタイリング（例）のメカニズムを提供することもできます.jsOff .someOtherClass{}。これを使用して、次の代替手段を提供できます<noscript>。

.jsOn .noJsOnly{
    display:none;
}
于 2011-06-03T10:42:03.057 に答える
1

You could also use Javascript to load content from another source file and output that. That may be a bit more black box-is than you're looking for though.

于 2008-08-27T14:46:56.717 に答える
1

非表示の 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 が貧弱な場合は、おそらく微調整する必要がありますが、アイデアは得られます。)

于 2008-09-01T11:32:46.303 に答える
0

Alex's article springs to mind here, however it's only applicable if you're using ASP.NET - it could be emulated in JavaScript however but again you'd have to use document.write();

于 2008-08-27T14:47:04.097 に答える
0

そのためのタグはありません。テキストを表示するには、javascript を使用する必要があります。

一部の人々は、JS を使用して動的に CSS を可視化することを既に提案しています。ノードを使用してテキストを動的に生成しdocument.getElementById(id).innerHTML = "My Content"たり、ノードを動的に作成したりすることもできますが、CSS ハックはおそらく最も読みやすいものです。

于 2008-08-29T21:18:59.523 に答える
0

段落| divの可視性を「非表示」に設定できます。

次に、「onload」機能で、可視性を「visible」に設定できます。

何かのようなもの：

<body onload="javascript:document.getElementById(rec).style.visibility=visible"> <p style="visibility: visible" id="rec">このテキストは、JavaScript が利用可能でない限り非表示になります。</p>

于 2008-08-27T14:57:44.197 に答える