2

デフォルト プロパティ用のリンクされた css ファイルと、wiewport が変更されると変更されるというニュース用の 2 つ目の css ファイルがあります。JS スクリプトの最後で、要素の offsetWidth をグローバル値 NavW に入れました。そのため、JS は間違った値を返すようです。DOM でのみ計算するのではなく、新しいものではなく最初のデフォルトの CSS プロパティに基づいて計算します。ただし、ターゲット要素は正しくレンダリングされました。条件の値「2」は、css ファイルではなくアイコンである Link 要素があるためです。

    function switchTheme(newHref)
    {
        var newIndex;

        newIndex = document.getElementsByTagName("link").length;

        var newTheme = document.createElement("link");

            newTheme.setAttribute("rel", "stylesheet");
            newTheme.setAttribute("type", "text/css");
            newTheme.setAttribute("href", newHref);

        if ( newIndex == 2 )
            {
                document.getElementsByTagName("head").item(newIndex - 2).appendChild(newTheme);
            }

        else if ( newIndex > 2 )
            {
                var themeToReplace = document.getElementsByTagName("link").item(2);

                document.getElementsByTagName("head").item(0).replaceChild(newTheme, themeToReplace);
            }

        NavW = document.getElementById("wrap").offsetWidth;

    }
4

1 に答える 1

1

いくつかのポイント:

  • スタイル シートを置き換えるコードは、不必要に複雑に見えます。
  • さらに、既存の要素内linkに新しい要素を追加/置換しているように見えます。これは、無効な HTML を生成していることを意味します。これがまったく機能することは幸運です。何かのようなもの：link<link src="..."><link src="..." /></link>
  • link要素数 (2) がハードコードされています。リンク要素の数が変わるたびにコードを変更する必要がある場合、大きな問題が発生します (それが起こらないとは言いません)。

関数で初めて link 要素を作成し、それを head の末尾に追加して参照を保存するだけで、これらすべてを解決できます。次回はその参照を使用し、リンクを削除せずに単純に変更しsrcます。

あなたの問題: このようなスタイル シートの読み込みは非同期です。つまり、link要素を作成した後、スクリプトはoffsetWidthスタイル シートが読み込まれるのを待たずに ( を取得する部分を含めて) 実行し続けます。

イベント ハンドラーをリンクにアタッチし、loadに依存するすべてのものをそのハンドラーに配置する必要がありますoffsetWidth。

newTheme.addEventListener("load", function() {
  var NavW = document.getElementById("wrap").offsetWidth;
  // get and USE width here
}, false);
于 2014-07-24T10:34:15.213 に答える