Stylesheet Selector for IE 5+ and Gecko

IE 及び Gecko に対応するスタイルシートセレクタ（カスタマイズ例）

(c) Hiro Konda. 2005/07/15

カスタマイズするにあたって

カスタマイズ例は、当Script "Stylesheet Selector Standards EDITION (css-select-std.js) "をご利用になっている事を前提に提供しています。 JavaScriptリファレンス及び、他の一般(JavaScript)ソースとの共有パーツを目的に提供するものではありません。

何をしているのか意味もわからずにソース混合させると役立たずになるかもしれませんので、予めご了承ください。

CSSをLINK要素追加する

(c) Hiro Konda. 2005/07/27

共通のページや特定のページのみでスタイルシートを追加するカスタマイズを考えます。

この追加 Scriptは、IE 5 - 6, Opera 7 - 8, Gecko (Netscape 6 - 8, Firefox)で動作します。

どのページ階層からでもCSSファイルへのリンクアドレスを呼び出せる様にする場合は、 共通するパス部分(CSS共通ディレクトリの最下位パス)を固定化しなければなりません。

手順

  1. ディレクトリパスを記憶する変数を追加する。(設定変数の後行辺りに追加)
  2. リンク要素追加用関数createCssLink()を追加する。(JavaScriptファイルの最後辺り)
  3. 開始チェック関数 cssInIt() 内部の makeCssSelectForm() 関数実行の直前で、リンク要素追加用関数 createCssLink() を実行させる。

コード追加及び、修正例

各ページ共通で外部スタイルシート(代替含む)を追加出来るようにする

共通変数を追加して、開始チェック関数 cssInIt() 内部の makeCssSelectForm()関数実行の直前で、 createCssLink() スタイル追加関数を実行させます。

// Debugの下行は、デバッグコードです。共通ディレクトリパスが正しいかどうかの確認用できます。

/* +++ 共通変数追加 +++ */

/* CSS共通ディレクトリの最下位パス */
var cssSitePath = '/css/';
/* ディレクトリパスを確定させる */
var cssBaseDir = w.location.href.substring(0,w.location.href.indexOf(cssSitePath)+cssSitePath.length);
// Debug
// w.alert(cssBaseDir);

/* +++ 開始チェック関数 cssInIt() 内部に追加修正 +++ */
/* 開始チェック (各種エラー避け) */
function cssInIt() {
        /* 最低限これが動かなきゃ...。 */
        if (!(d.getElementsByTagName || d.getElementsByTagNameNS)) { return;}

        /* IE 専用ですか？ */
        if (cssFormIeOnly && !((winIe || macIe))) { cssErrFunc(1,''); return;}

        /* Opera 7.5+ は、application/xhtml+xmlでこけます。(head 要素の存在確認) */
        if (op7 && isXHTML) {
        	var checkOpe = GetElementsByTagName(nsURI,'head');
	        if (checkOpe.length == 0) { return;}
        }

        /* makeCssSelectForm関数の前に リンク追加関数を追加します。*/
        createCssLink(cssBaseDir + 'basic-bw.css','Black on White','screen, print','Shift_JIS',1);

        /* さて選択フォームを作りましょう */
        makeCssSelectForm();
}

特定のページのみで外部スタイルシート(代替含む)を追加出来るようにする

共通変数を追加して、開始チェック関数 cssInIt() 内部の makeCssSelectForm()関数実行の直前で、 createCssLink() スタイル追加関数及び、条件分岐を実行させます。

なお、追加する sitePath (サイト共通ディレクトリの最下位パス)変数は、 製作者側のサイト環境に合わせて設定してください。

// Debugの下行は、デバッグコードです。共通ディレクトリパスが正しいかどうかの確認用できます。

/* +++ 共通変数追加 +++ */

/* CSS共通ディレクトリの最下位パス */
var cssSitePath = '/css/';
/* ディレクトリパスを確定させる */
var cssBaseDir = w.location.href.substring(0,w.location.href.indexOf(cssSitePath)+cssSitePath.length);
// Debug
// w.alert(cssBaseDir);

/* サイト共通ディレクトリの最下位パス */
var sitePath = (w.location.href.indexOf('%7Ekonda')! =- 1) ? '/%7Ekonda/' : '/~konda/';
/* サイト共通ディレクトリを確定させる */
var siteBaseDir = w.location.href.substring(0,w.location.href.indexOf(sitePath)+sitePath.length);
// Debug
// w.alert(siteBaseDir);

/* +++ 開始チェック関数 cssInIt() 内部に追加修正 +++ */
/* 開始チェック (各種エラー避け) */
function cssInIt() {
        /* 最低限これが動かなきゃ...。 */
        if (!(d.getElementsByTagName || d.getElementsByTagNameNS)) { return;}

        /* IE 専用ですか？ */
        if (cssFormIeOnly && !((winIe || macIe))) { cssErrFunc(1,''); return;}

        /* Opera 7.5+ は、application/xhtml+xmlでこけます。(head 要素の存在確認) */
        if (op7 && isXHTML) {
        	var checkOpe = GetElementsByTagName(nsURI,'head');
	        if (checkOpe.length == 0) { return;}
        }

        /* makeCssSelectForm関数の前に リンク追加関数を追加します。*/
　　    /* ローカルや、HTTP上においても 共通ディレクトリ + 'index.html'ならば、代替スタイルシートを追加する。*/
        if (w.location.href == siteBaseDir + 'index.html') {
                createCssLink(cssBaseDir + 'basic-bw.css','Black on White','screen, print','Shift_JIS',1);
        }

        /* さて選択フォームを作りましょう */
        makeCssSelectForm();
}

CSS追加用関数 (CSSを追加する追加関数)

createCssLink(href,title,media,charset,alternate) の、 alternateは、1を与えると "alternate stylesheet"代替スタイルシートとなります。

/* +++ CSS追加用関数 +++ */
function createCssLink(href,title,media,charset,alternate) {
  if (d.createStyleSheet) {
    if (d.all && d.createStyleSheet) {
      var lastIdx = d.styleSheets.length;
      d.createStyleSheet(href);
      d.styleSheets.item(lastIdx).media = media;
      d.styleSheets.item(lastIdx).title = title;
      d.styleSheets.item(lastIdx).disabled = (alternate) ? true : false;
    }
  } else if (d.createElement) {
    var head = GetElementsByTagName(xmlns,'HEAD').item(0);
    var rel = (alternate) ? "alternate stylesheet" : "stylesheet";
    CEAppendChild(head,new Array('LINK','type','text/css','href',href,'rel',rel,'title',title,'media',media,'charset',charset));
// Debug
// w.alert(head.innerHTML);
  }
}

第二版 : 2005/07/27

This URL: http://www.minc.ne.jp/~konda/web_resoce/js/css-select/customise.html