［CSS覚書］styleswitcher.jsでCSSを切り替えて文字サイズを変更するボタンを作る
styleswitcherで久々に文字の大きさを変更するボタンを作りました。
最初に以下のページを参考に作って切替はうまくいきました。
★【改訂版】javascript + cssでフォントサイズ切り替え ｜ blog.ks-product.com
★[使える CSS テクニック] CSS で文字サイズを変更するボタンを設置する | バシャログ。
自分の設定は以下の感じです。
link rel="alternate stylesheet"
にするのがポイントのようだ。
絶対パスにしたのはMTのテンプレ対策です。
<link rel="alternate stylesheet" type="text/css" href="http://www.hogehoge.com/font_medium.css" title="medium" /> <link rel="alternate stylesheet" type="text/css" href="http://www.hogehoge.com//font_large.css" title="large" />
<ul class="clearfix">
<li id="sizem"><a href="#"
onclick="setActiveStyleSheet('medium');
return false;"><img src="http://www.hogehoge.com/img/btn_sizem.gif" width="21" height="22" alt="中ぐらいにする" /></a></li>
<li id="sizel"><a href="#"
onclick="setActiveStyleSheet('large');
return false;"><img src="http://www.hogehoge.com/img/btn_sizel.gif" width="25" height="26" alt="大きくする" /></a></li>
しかし、IEのみでエラーメッセージ出ました。
メッセージ: ‘getAttribute(…)’ は Null またはオブジェクトではありません。
ライン: 4
文字: 5
コード: 0
エラーの要件は次の２件
・エラーが出るのはIEのみ（FFは出ない）
・トップページは出ない、第二階層のみで出る
headタグを揃えるようにしましたが、それでも同じエラーが出ます。
IEでCookieの引き継ぎのときに不具合が出ているという情報を見つけたので、
たぶんこれが原因だと思います。
★IEでのalternate stylesheetによるスタイル変更の不具合 – tail -f /var/log/こうちかずお.log
しかし、この方と同じに修正してもうまくいかなかったので、
更に捜したところ
修正版が出ているという情報をキャッチしました。
これから作る人は以下の最新の修正版を使った方がいいですよ！
修正版のstyleswitcher.js紹介ページ コメント欄のとこにあります。
見つからない人のために直リンクw
その他の不具合
tiny scrolling.jsと併用する時の不具合
★崖っぷちブログ よくある不具合【styleswitcher.js】
リンク先を#とせず、index.htmlをつけないといけない。
しかし私は、smoothscroll.jsを使っていたのですが、この不具合はなかったです。
スクロール用のJSでもプログラムによるのかも。
FFで、link要素にrel属性以外のものが、styleswitcher.jsのlinkより上にあるとダメ
ここだと混じってるとダメとあるのですが、こちらだと一番下に記述すればよいようです。
2007年時点で、上の不具合をまとめられてる方がいてすごい。
★[ BUN:Log ] styleswicher.jsを使う場合の注意点
ここのおかげで修正版のjsファイルを入手することができました。
ありがとうございます！
全切替する方法
実は、３～４年前にもstyleswitcherで、似たような仕組みを使ったのですが、
その時はまだCSSをはじめたばかりで、ベースのCSSがあまりいい設定ではなく、
サブのシートだけだと、乱れた表示になったので、
ディレクターからそれぞれ調整したシートを作る用に指示されたので
全切替にしてました。
<link rel="stylesheet" type="text/css" href="font_base.css" title="base" /> <link rel="alternate stylesheet" type="text/css" href="larger.css" title="larger" />
title=”base”にするだけで、全切替うまくいってましたね。