이 기사에서는 JS Page 스키닝 기능을 처리하는 원리 (* 서버 환경에서 테스트하고 사용해야 함)를 소개합니다. 특정 내용은 다음과 같습니다
원칙:
1. 피부 제거는 페이지를 사용하지 않은 스타일 설정으로 사용하도록하는 것입니다.
2. 우리는 피부 교체 영역을 기반으로 여러 스타일의 시트 파일을 만듭니다.
3. 링크 ID를 가져옵니다
4. 링크의 HREF 속성을 수정하여 스타일 시트를 변경합니다.
5. 사용하지 않고 스타일 시트를 사용하십시오. 해당 피부 스타일을 사용하십시오.
6. 쿠키 기술 사용의 사용자 원리를 사용하면 사용자가 마지막 피부 선택을 사용합니다.
7. 해당 피부 CSS에 미리로드되도록 페이지에서 쿠키를 읽기 시작해야합니다.
<html> <head> <title> js 페이지 스키닝 함수 </title> <meta charset = "utf-8"> <link href = "public.css"rel = "stylesheet"type = "tept/css"/<link href = "1.css"rel = "Stylesheet"type "tept/css"id = "skipt type ="/jav "" "" "/>>>. /*js 페이지 스키닝 기능 처리 원리 1. 스킨 교체는 스타일 설정을 사용하지 않고 페이지를 설정하는 것입니다. 선택 7. 페이지 로딩 시작시 쿠키를 읽고 해당 스킨 CSS가 미리로드되도록 *////쿠키를 읽고 Skin Change var skin = docum var skipval = ReadCookie ( "스킨"); if (! skipval) {// 쿠키에 레코드 스킨이없는 경우 href = "1.css";} else {skin.href = skipval+". var skin2 = document.getElementById ( "skin2"); var skin3 = document.getElementById ( "skin3"); var days = 30; // 만료 시간 설정, var exp = new date (); exp.settime (exp.gettime () + 일*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 (); };}; // 쿠키 함수의 지정된 값을 읽습니다. 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> <div> <div> <div> <div> <div> <div> <div> <div> <valk "value ="skin1 "id ="skin1 ""skin1 ""skin1 "/<input type ="button "value ="skin2 "id ="skin2 "/> <input type ="skin3 "id ="skin3 "/> <div> <div> <div> <div> i div> i div> <div> i div> <div> <div> <div> <div> <div> <div. Am content2 </div> <div> 나는 content3 </div> </div> <div> 나는 꼬리 정보입니다 </div> </body> </html>소스 코드 다운로드 : http://xiazai.vevb.com/201607/yuanma/jschangeskin(Vevb.com).rar
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.