6

私はJavascriptを使って「写真フェードローテータ」を<div>. ただし、JS が有効になっていない場合は、代わりに表示したいアニメーション GIF があります。私は実際にこのコードで動作しています：

<div id="slideshow" class="show pics float-left">
    <img src="images/banner-photos/new-01.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-02.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-03.png" width="343" height="228" alt="photo" />
</div>

<noscript>
    <link href="css/hide-slideshow.css" rel="stylesheet" type="text/css" />
    <p class="adjust"><img src="images/banner-photos/animation.gif" alt="slideshow" /></p>
</noscript>

外部 JS ファイルは、<div>. id="slideshow" のクラスは、サイズ、パディング、マージン、配置などを設定します。「hide-slideshow」css ファイルは #slideshow で「display:none」を実行し、アニメーション gif の周りの「adjust」クラスはいくつかの処理を行います。必要な場所に移動するために押したり引いたりします（スライドショーが非表示になっていない場合は、スライドショーがある場所です）。

FF3、IE7、IE8、Chrome、および Safari (Win) でこれをテストしました。良いニュースは、それが魔法のように機能することです。悪いニュースは、W3C バリデータに合格しないことです。「ドキュメント タイプでは要素「リンク」が許可されていません」というエラーが表示されます。

私の方法はうまくいきますが、それはあまりにも厄介ですか？クロスブラウザーで動作し、検証に合格する方法で、<div>JS が有効になっている場合は1 つを表示し、そうでない場合は別の方法で表示するより良い方法はありますか?<div>

ありがとう！

4

3 に答える 3

25

このようなことを試してください。正常に劣化し、<noscript />タグは必要ありません。

<div id="hasJavaScript" style="display: none">
    <!-- Contents hidden when JavaScript is disabled -->
</div>

<div id="noscript">
    <!-- Contents shown only when JavaScript is disabled -->
</div>

<script type="text/javascript">

    document.getElementById('hasJavaScript').style.display = 'block';
    document.getElementById('noscript').style.display = 'none';

</script>

例を簡潔にするために、ID を使用しました。クラスを使用する方が適切です。また、 HTML5 BoilerplateやModernizrなどのほとんどの適切なスターター フレームワークは、HTML タグの CSS クラスを使用してこれを行うため、JS を使用する代わりに、CSS ファイルのコンテンツをグローバルに非表示/表示する方法があります。<html />タグは CSS クラスで始まり、JSno-jsのクラスに置き換えられます。jsこれにより、JS の存在に依存する CSS ルールの前に適切なクラスを付けることができます。これは、プレゼンテーション上のもの (視覚的に非表示/表示する必要があるもの) を論理的なもの (ページが JS を実行しているかどうか) から分離するため、よりセマンティックです。

元の質問に答える別のオプションは、CSS ドキュメントへのリンクをデフォルトで head に追加し、JavaScript を使用して削除することです。(免責事項) これはテストしていませんが、すべてのブラウザーで動作するはずです。

<script type="text/javascript">
    var cssDocs = document.getElementsByTagName('LINK');
    for (var i = 0; i < cssDocs.length; i++) {
        var css = cssDocs[i];
        if (css.href === 'css/hide-slideshow.css') {
            var parent = css.parentNode;
            parent.removeChild(css);
            break;
        }
    }
</script>

jQueryを使用している場合は、このスクリプトを短縮することもできます。

$("link[href='css/hide-slideshow.css']").remove();
于 2009-06-08T02:04:55.573 に答える
4

no-Javascriptdivに独自のクラスを与え、そのスタイル定義をスタイルシートに入れるだけです。ブロックに含めます<noscript>。スクリプトを使用して、もう一方を動的に挿入できdivます。

于 2009-06-08T01:57:50.597 に答える
0

<link...>要素が に属しているため<head...>、エラーが発生しました。

簡単な解決策は、「javascript なし」の css をメインの css ファイルに配置することです。<head...>

于 2009-06-08T01:59:39.127 に答える