csskks.jsのカスタマイズ

スタイル選択フォームのスタイル設定
スタイル選択フォームの挿入位置を変更する
- 参考
- 注意

CSS切替スクリプトで提供しているcsskks.jsのカスタマイズ方法について述べます。

スタイル選択フォームのスタイル設定

選択フォームは(スタイル未適用時も含め)常に右上に表示するようになっていますが、これはselectFormStyleという関数で設定しています。

この設定を解除するには、appendSelectForm関数内でselectFormStyle関数を呼び出している部分を、以下のようにコメントアウトして下さい。

    /* 選択フォームにスタイルを設定 */
    //selectFormStyle(ndiv);

スタイル選択フォームは以下のようなマークアップになります。外部CSSで選択フォームにスタイルを設定する場合の参考まで。

<div class="selectstylesheet">
  <label>style: 
    <select id="styleselectelement">
      <option>Style A</option>
      <option>Style B</option>
      <option>no style</option>
    </select>
  </label>
</div>

スタイル選択フォームの挿入位置を変更する

csskks.jsではbody要素の先頭に選択フォームが挿入されますが、この位置を変更する方法について。

スクリプトでスタイル選択フォームを挿入している箇所は、appendSelectForm関数の以下の部分になります。

    /* 選択フォームを本文に追加 */
    var nbody = document.getElementsByTagName('body')[0];
    nbody.insertBefore(ndiv, nbody.firstChild);

この2行は以下のような意味になります。

文書中のbody要素のうち、最初([0])のものを nbody とする。
nbodyの中の最初の子ノードの前に、 ndiv (これが選択フォームにです)を挿入する。

この辺を適切に変更することにより、フォームの挿入位置を変更することができます。以下に幾つか例を挙げます。

(先頭から数えて)2番目のdiv要素内の先頭に挿入

    var ntarget = document.getElementsByTagName('div')[1];
    ntarget.insertBefore(ndiv, ntarget.firstChild);

3番目のdiv要素内の末尾に挿入

    var ntarget = document.getElementsByTagName('div')[2];
    ntarget.appendChild(ndiv);

4番目のul要素の直前に挿入

    var ntarget = document.getElementsByTagName('ul')[3];
    ntarget.parentNode.insertBefore(ndiv, ntarget);

最初のh2要素の直後に挿入

    var ntarget = document.getElementsByTagName('h2')[0];
    ntarget.parentNode.insertBefore(ndiv, ntarget.nextSibling);

以上の例では、目標となる要素ノード(ntarget)を「X要素のY番目のもの」という指定によって取得していますが、要素のid属性を用いて取得することもできます。例えば以下のように。

id="selectformtarget" を持つ要素を ntarget とする

    var ntarget = document.getElementById('selectformtarget');

参考

DOM1仕様書(日本語訳)

注意

csskks.jsが生成するスタイル選択フォームはdiv要素ですが、HTMLの仕様上、div要素を挿入できる箇所には制限がありますのでご注意下さい。(body要素の直下、または他のdiv要素の直下に挿入するのはOKです)

選択フォームの挿入位置を変更する場合、切り替えるスタイルごとに選択フォームの位置が大きく変わってしまうと、利用者が選択フォームの位置を見失う場合がありますので、ご注意下さい。(逆に言うと、csskks.jsでは利用者がスタイル切り替えでフォームの位置を見失わないようにするため、「body要素内の先頭に挿入」「常に右上に表示」としています)