저희 가 사 이 트 를 제작 할 때 자신의 사이트 가 다양한 스타일 이 기 를 바 랍 니 다.사용 자 는 자신의 취향 에 따라 서로 다른 스타일 을 선택 할 수 있 습 니 다.이런 스타일 은 구조 상의 변화 일 수도 있 고 색채 상의 차이 일 수도 있 으 며 서로 다른 사용자 군 을 대상 으로 특별히 정 한 스타일 일 수도 있 습 니 다.우 리 는 어떻게 다 중 스타일 선택 과 스타일 의 실시 간 전환 을 실현 해 야 합 니까?사실은 IE 가 이 기능 을 지원 하지 않 을 뿐 우 리 는 브 라 우 저 에 맡 길 수 있 고 FireFox 는 이 기능 을 지원 합 니 다.만약 에 우리 가 두 개의 CSS 가 있다 고 가정 하면 각각 두 개의 서로 다른 파일 에 갇 혀 있다.a.css 와 b.css.그리고와사이 에 다음 두 줄 의 XHTML 코드 를 추가 합 니 다. 그리고 Firefox 로 이 페이지 를 열 고 메뉴 표시 줄 에서 선택 하 십시오:보기 -> 페이지 스타일 은'테마 A','테마 B'를 볼 수 있 고 실시 간 으로 선택 할 수 있 을 것 이다.우리 가 사용 할 수 있 는 또 다른 방법 은 바로 동적 프로그램 으로 완성 하 는 것 이다.예 를 들 어 ASP,PHP,JSP 등 이다.이렇게 하 는 장점 은 직접적 이 고 효율 적 이 며 호환성 이 좋 으 며 사용자 의 선택 을 기억 할 수 있다 는 것 이다.사용자 의 선택 을 Cookies 에 기록 할 수도 있 고 데이터베이스 에 직접 기록 할 수도 있 으 며 사용자 가 다시 방문 할 때 선택 한 스타일 을 직접 호출 할 수도 있 습 니 다.구체 적 인 제작 은 여기 서 상세 하 게 설명 하지 않 겠 습 니 다.저희 사이트 www.52cs.com 을 주목 하 셔 도 됩 니 다.저 희 는 비정 기적 으로 이 방면 의 내용 을 출시 할 것 입 니 다.지금 우 리 는 어떤 방법 을 사용 해 야 합 니까?브 라 우 저 를 선택 하 는 방법,주류 브 라 우 저 IE 는 지원 되 지 않 습 니 다.프로그램 스 크 립 트 로?내 홈 페이지 가 정적 이 고 데이터베이스 도 없다.우 리 는 자 바스 크 립 트 의 방법 으로 그것 을 해결 할 수 밖 에 없다.우 리 는 아래 의 코드 를 본다:function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; } function getPreferredStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title") ) return a.getAttribute("title"); } return null; } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; documents.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = documents.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); 위의 코드 는 다 중 스타일 선택,실시 간 스타일 전환 을 실현 하 는 자바 script 스 크 립 트 입 니 다.우 리 는 위의 코드 를 js 파일 로 저장 할 수 있 습 니 다.필요 한 페이지 에서 직접 참조 할 수 있 습 니 다.물론 위의 코드 를 페이지 내부 에 직접 쓸 수도 있 습 니 다.우리 의 스타일 은 세 가지 가 있 는데,하 나 는 기본적으로 다른 두 가지 다른 스타일 이다.이 세 개의 css 파일 을 페이지 파일 에 도입 합 니 다: 자,우 리 는 지금 페이지 에서 스타일 전환 링크 를 추가 할 수 있 습 니 다:기본 스타일-흰색스타일 1-파란색스타일 2-주황색지금 우 리 는 큰 성 과 를 거 두 었 습 니 다.우리 위의 성 과 를 테스트 하고 효 과 를 보 세 요.ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> http://www.w3.org/1999/xhtml"> 아 Q 가 원http://www.52css.com/attachments/month_0701/r2007128164252.css" /> http://www.52css.com/attachments/month_0701/c2007128164223.css" title="aaa" /> http://www.52css.com/attachments/month_0701/h2007128164239.css" title="bbb" /> function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; } function getPreferredStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title") ) return a.getAttribute("title"); } return null; } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; documents.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = documents.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); 기본 스타일-흰색스타일 1-파란색스타일 2-주황색
