この記事では、参照のために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をもっとサポートすることを願っています。