JavaScriptとCSSを組み合わせてWebページスキニング機能を実装_JavaScriptスキル

HTML コード部分:
1. 別の href を呼び出すには、このリンクを操作する必要があります。ボタン (バックグラウンドで各 li に onclick イベントを追加して、スキン変更機能をトリガーします)


Gray

• Green


• 黄色


• 青


• ピンク


• 紫



Js 部分:

1. スキン変更メソッド //Cookie、ボタン選択状態、ページスキンを設定 skin.setSkin=function(n){
varskins =("skin").getElementsByTagName( " li");
for (i=0;i{
skins[i].className="";//ボタンの状態を初期化します
} skin.setCookie(n);//現在のスタイルを保存します
("skin_" n).className="selected";//選択したスキンボタンのスタイルを設定します
("cssfile").href ="css/ main" n ".css";//ページ スタイルを設定します
}

2. Cookie にアクセスします

//現在のスキン n を Cookie スキンに保存します.setCookie= function(n){ varexpires=new Date();
expires.setTime(expires.getTime() 24*60*60*365*1000);
var flag="Skin_Cookie =" n ;
document.cookie=flag ";expires="expires.toGMTString();
}
//ユーザーが設定したスキン スタイルを返します
skin.readCookie=function() {
var Skin=0;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name "="); start1==-1 ){
skin=0;//設定されていない場合は、デフォルトのスタイルを表示します
}
else{
var start=mycookie.indexOf("=,start1) 1 ;
var end =mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
var 値 = unescape( mycookie.substring(start, end));
if (values!=null)
{
skin=values;
}
スキンを返します。 🎜>
3 .バインドスキンボタンイベント

skin.addEvent=function(){
varskins =("skin").getElementsByTagName("li"); =0;i {
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))}
}

4. ページのロード後にスキン スタイルを設定します window.onload=function(){
skin.setSkin(skin.readCookie());//Set Cookie の読み取りの戻り値に応じて スキン スタイル
skin.addEvent();// ボタン イベントをバインドします