mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも
スタイルの違うファイルを3種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。
<a id="s1" href="#">StyleA</a> <a id="s2" href="#">StyleB</a> <a id="s3" href="#">StyleC</a>
window.addEvent('domready', function(){ var path = 'css/'; var style_1, style_2, style_3; /* Style 1 */ $('s1').addEvent('click', function(e) { e = new Event(e).stop(); url ='style.css'; cssid ='style1'; if (style_1) style_1.remove(); new Asset.css(path + url, {id:cssid}); style_1 = $(cssid); }); /* Style 2 */ $('s2').addEvent('click', function(e) { e = new Event(e).stop(); url ='style-w.css'; cssid = 'style2'; if (style_2) style_2.remove(); new Asset.css(path + url, {id:cssid}); style_2 = $(cssid); }); /* Style 3 */ $('s3').addEvent('click', function(e) { e = new Event(e).stop(); url ='style-b.css'; cssid = 'style3'; if (style_3) style_3.remove(); new Asset.css(path + url, {id: cssid}); style_3 = $(cssid); }); });