![[ BUN:Log ]](/img/common/logo.jpg){kind=logo}
07.05.29styleswicher.jsを使う場合の注意点
A List Apartで紹介されているstyleswitcher.jsを利用する場合、注意すべき点があるので補足。
styleswitcher.jsでは、「link要素には、rel属性が定義されている」という前提でスクリプト組まれている。そのため、head要素内に<link rev="" ...>などが存在する場合、JavaScriptのエラーとなってしまう。
解決策としては、以下の2つ。
- head要素内から、rel属性以外が定義されたlink要素を削除する。(※または、rel要素で代用できないかを検討する。)
- こちらのコンテンツの「コメント欄」からリンクされている、修正済みのJavaScriptファイルを利用する。
制作時に不具合が生じた場合は、いずれかの方法で回避して欲しい。
トラックバック(0)
このブログ記事に対するトラックバックURL: http://d-s-b.jp/mt4/mt-tb.cgi/21
お伺いしたいのですがstyleswitcherでcssを切り替えて、更に切り変わったcssを切り替えるようにすることは可能なのでしょうか？
色4色と画像文字サイズ4パターン計16パターンを切り替えられるようにしたいのですが・・・
ちなみに切り替え用のボタンを8つです。
可能でしたら教えて下さい。
宜しくお願い致します。
＞ けいすけさん
コメントありがとうございました。
遅くなりましたが、ご質問の回答をさせていただきます。
基本的に、styleswitcher.jsをそのまま利用する場合、設定したCSS(色4種+文字4種)が1つのグループとして扱われるため、ご希望の16パターンは実現できないと思います。
そこで、代替案ですが。
色4種はstyleswitcher.jsで設定し、文字4種はDOMを利用したJavaScriptによる切り替えとする・・・という形で、解決できると考えます。簡単に言うと、外部CSSを指定するlink要素にid属性を付加しておいて、文字の切り替えボタンをクリックした際にidを指定してソースファイルを変更するという感じです。
とは言え、文字のみの説明だと判りづらいと思いますので・・・(苦笑)
参考になりそうなコンテンツを探してみました。
http://allabout.co.jp/internet/hpcreate/closeup/CU20070711A/index.htm
このAllAbout 西村さんの記事ではselect要素にonchangeイベントを付加していますが、切り替えボタンをリンクテキスト(または画像)にするのであれば、onclickにて引数を付けた関数の呼び出しをすれば大丈夫なハズです。
失礼とは思いつつ、時間の都合で実際には試していないので、もし実現できない or 不具合がある・・・という場合には、再度お声掛けください。