この記事では、参照のためにJSページのスキニング機能(*サーバー環境でテストして使用する必要がある)の処理の原則を紹介します。特定のコンテンツは次のとおりです
原理:
1。肌の除去は、ページに未使用のスタイル設定を使用させることです
2.肌の交換領域に基づいて複数のスタイルシートファイルを作成します。
3.リンクIDを取得します
4.リンクのHREF属性を変更して、スタイルシートを変更する
5。使用せずにスタイルシートを使用して、対応するスキンスタイルを使用してください
6. Cookieテクノロジーを使用するというユーザーの原則を使用して、ユーザーは最後のスキン選択も使用します
7.クッキーの読み取りは、対応する皮膚CSSが事前にロードされるようにページでロードを開始する必要があります
<html> <head> <title> jsページスキン機能</title> <meta charset = "utf-8"> <link href = "public.css" rel = "styleSheet" type = "text/css"/> <link href = "1.css" rel = "styleSheet" type = "text"/css /*jsページスキン機能処理原則1。スキンの交換は、スタイル設定を使用せずにページを設定することです。2。リンクを使用せずにスキンに従って複数のスタイルシートファイルに置き換える場所を作成します3。リンク4を取得します。4。スタイルシートを変更するためにリンクを変更します。 7.ページのロードの先頭にクッキーを読み、対応するスキンCSSが事前にロードされるようにします *//クッキーを読み取り、スキン変更var skin = document.getElementbyId( "skin"); //リンク要素var cookieval = document.cookie; var skipval = readcookie( "skin"); if(!skipval){// cookieがレコードskin.href = "1.css";} else {skin.href = skipval+"。css"; // window.onload = function(){// skin var skin1 = documentlementyid( "skin1"); var skin2 = document.getElementById( "Skin2"); var skin3 = document.getElementById( "Skin3"); var Days = 30; //有効期限を設定する、var exp = new date(); exp.settime(exp.gettime() + days*24*60*60*1000); skin1.onclick = function(){skin.href = "1.css"; document.cookie = "skin = 1; expires ="+exp.toutcstring(); }; skin2.onclick = function(){skin.href = "2.css"; document.cookie = "skin = 2; expires ="+exp.toutcstring(); }; skin3.onclick = function(){skin.href = "3.css"; document.cookie = "skin = 3; expires ="+exp.toutcstring(); };}; // cookie function readcookie(key)の指定された値を読み取ります{var skinval = false; var arrkv = cookieval.split( ";"); for(var i = 0; i <arrkv.length; i ++){var itemc = arrkv [i] .split( "="); if(itemc [0] == key){skinval = itemc [1]; }それ以外{ }; }; return skinval;};</script></head><body><div> <div> <input type="button" value="skin1" id="skin1" /> <input type="button" value="skin2" id="skin2" /> <input type="button" value="skin3" id="skin3" /> </div></div><div> <div>I am content1</div> <div>I am content2 </div> <div>私はcontent3 </div> </div> <div>テール情報です</div> </body> </html>ソースコードのダウンロード:http://xiazai.vevb.com/201607/yuanma/jschangeskin(vevb.com).rar
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。