JavaScriptで文字サイズを変更２
カレント表示対応版｜styleswitcher.js
以前、｢JavaScriptで文字サイズを変更｣という記事を書きましたが、カレント表示（現在どのサイズで表示されているか）でつまずき、結局画像を使ったボタンにして、どのサイズで表示されているか？というコトが分からないサンプルを紹介しました。
実際に文字サイズを変更するような案件が出てきたコトもあり、何か対策がないものかと考えていると、灯台もと暗しというか何というか…、非常に簡単であるコトに気づきました。
styleswitcher.jsで読み込むalternate stylesheetにそれぞれのボタンの状態を記述すれば良いだけだったんですね。
…という訳でサンプルです。
今回、｢小 中 大｣の文字も画像にしてしまったため、ソース上のテキストはdisplayプロパティで消してしまってますが、お好みに応じて変更してください。
注意する点といえば、a要素に正確な幅と高さを指定して、displayプロパティをblockに、cursorプロパティをpointerにしておくコトくらいでしょうか。
サンプルを参考にいろいろと試していただければと思います。
| 固定リンク
この記事へのコメントは終了しました。
コメント