1

シングルページアプリケーションにテーマサポートを追加したいと思います。要件は、オフラインモードで使用するには、テーマの変更をjavascript（サーバー呼び出しなし）によってローカルで実行する必要があることです。私はangularjsを使用しているので、ルーターでhtmlが変更されます。

私が抱えている唯一の問題は、cssの扱い方です。cssファイルをロードするのに役立つjsライブラリはありますか？何か問題はありますか？

編集：私は次のライブラリhttps://github.com/rgrove/lazyload/を見つけました。これはcssファイルをロードする仕事をするはずです。ライブラリの唯一の欠点は、ライブラリの最後の更新が1年以上前であることです。より積極的に開発されたライブラリをいただければ幸いです。

4

2 に答える 2

0

style要素はJavaScriptで追加および削除できます。要素を作成してページに追加し、そこにルールを適用し、要素を削除してルールを削除するだけです。外部スタイルシートを参照する要素でも同じことができますがlink、オフラインモードで作業する必要があり、シートがキャッシュされていない可能性がある場合は、styleインラインルールを持つ要素の方が適切に機能する可能性があります。

style要素を使用した例を次に示します。

(function() {
  var css = "body { color: green; }";

  document.getElementById("theButton").onclick = toggleStyle;

  function toggleStyle() {
    var style = document.getElementById("styleOne");
    if (style) {
      // Remove it
      style.parentNode.removeChild(style);
    }
    else {
      // Add it
      style = document.createElement('style');
      style.id = "styleOne";
      if (style.styleSheet) {
          style.styleSheet.cssText = css;
      }
      else {
          style.appendChild(document.createTextNode(css));
      }
      document.body.appendChild(style);
    }
  }

})();

ライブコピー| ソース

linkスタイルテキストの行き先に関するブラウザの違いに対処する必要がないため、aの使用はさらに簡単になります。

于 2012-11-05T12:47:27.833 に答える
0

テーマの色が変わるだけの場合は、別のcssクラスを使用してこの問題に対処します。CSSは上書きされる可能性があるため、テーマ名をクラスとして親要素にアタッチし、それに対応するルールを作成するだけです。テーマに関連するすべてのcssルールを別のファイルに配置することをお勧めします。これにより、保守が容易になります。

お気に入り

.themename.cssclassname{
   color: red;
}

切り札になります

.cssclassname{
   color: green;
}

また、使用量を減らしてネストされたルールを簡単に作成できます

これを行うことにより、3つの利点があります。

  1. IE7を含むすべてのブラウザがこれを受け入れます。（スタイルタグを動的に挿入すると、IE7にいくつかの問題があると思います）

  2. すべてのCSSファイルがキャッシュされます。

  3. メンテナンスが簡単です。（CSSとJSをあまり混ぜるのは本当に好きではありません。）

于 2012-11-05T15:54:45.087 に答える