W3C 표준:실시 간 으로 CSS 스타일 전환
물론 가죽 을 바 꾸 기 전에 W3C 기준 에 따라 웹 사 이 트 를 만 들 고 다른 표현 을 하 는 CSS 두 세트 를 준비 해 야 합 니 다."가죽 바 꾸 기'는 실질 적 으로'CSS 바 꾸 기'입 니 다.우리 가 해 야 할 일 은 브 라 우 저 로 하여 금 다른 CSS 를 불 러 와 페이지 를 다시 렌 더 링 하 게 하 는 것 입 니 다.방법 은 여러 가지 가 있 습 니 다.가장 흔히 볼 수 있 는 세 가 지 를 소개 하 겠 습 니 다.
방법 1:아무것도 하지 않 는 다
네?아무것도 안 해?음.................................................................................
만약 에 우리 가 두 개의 CSS 가 있다 고 가정 하면 각각 두 개의 서로 다른 파일 에 갇 혀 있다.a.css 와 b.css.그리고와사이 에 다음 두 줄 의 XHTML 코드 를 추가 합 니 다.
그리고 Firefox 로 이 페이지 를 열 고 메뉴 표시 줄 에서 선택 하 십시오.보기->페이지 스타일 은 다음 과 같은'풍경'을 볼 수 있 습 니 다.
이렇게 간단 하 니 이 제 는 Firefox 로 가죽 을 바 꿀 수 있 습 니 다.IE？IE 는 이 기능 이 없습니다....................................................................................다행히도 이 일 은 그리 어렵 지 않 으 니,우리 대신 수고 합 시다.
[separator]
방법 2:Javascript
방법 1 에 더 해 자 바스 크 립 트 의 DOM 방법 으로 링크 대상 에 접근 하고 필요 하지 않 은 CSS 를'비활성화(disabled)'로 설정 하면 나머지 CSS 는 브 라 우 저 에서 페이지 를 렌 더 링 하 는 데 사 용 됩 니 다.스 크 립 트 는 다음 과 같 습 니 다.설명 을 주의 하 십시오.
그리고 적당 한 곳 에서 이 함 수 를 호출 합 니 다.이 페이지 를 예 로 들 면 다음 과 같은 두 단 추 를 추가 합 니 다.
자 바스 크 립 트 를 사용 하 는 장점 은 편리 하고 빠 르 며 간단 하 며 단점 도 뚜렷 하 다.전체 사이트 의 CSS 전환 을 하기 어렵 고 현재 페이지 에 만 국한 된다.사용자 의 선택 을 기억 하기 위해 실행 가능 한 방안 은 쿠키 를 사용 하 는 것 입 니 다.그러나 쿠키 를 사용 하 더 라 도 언제 CSS 를 불 러 올 지,사용자 가 Javasciprt 지원 이 없 으 면 어떻게 할 지 등에 대해 많은 글 을 써 야 합 니 다.그 러 니 차라리 아래 의 방법 으로
방법 3:서버 엔 드 스 크 립 트
최고의 CSS 전환 기 는 서버 엔 드 스 크 립 트(PHP,ASP,JSP 등)를 사용 해 개발 해 야 한 다 는 것 은 의심의 여지 가 없다.이렇게 하 는 장점 은 매우 뚜렷 하 다.직접적 이 고 효율 적 이 며 호환성 이 좋 으 며 사용자 의 선택 을 기억 할 수 있 고 심지어 서로 다른 CSS 를 조합 하여 상당히 복잡 한'피부'전환 을 실현 할 수 있다.
저 는 PHP 를 예 로 들 면 다른 언어 로 도 대동소이 하기 때문에 일반 개발 자 들 에 게 는 아무런 어려움 이 없 을 것 입 니 다.
기본 적 인 사고방식 은 다음 과 같다.사용자 가'피부'를 선택 하여 사용자 의 선택 을 쿠키 에 기록 하 는 것 이다.(데이터베이스 에 기록 하 는 것 도 마찬가지 지만 이렇게 하면 시스템 비용 이 많이 든다.)사용자 가 사이트 의 어떤 페이지 를 방문 할 때 쿠키(또는 데이터베이스)에서 이전 사용자 의 선택 을 읽는다.해당 CSS 파일 을 불 러 옵 니 다.
switcher.php 라 는 파일 을 만 듭 니 다.내용 은 다음 과 같 습 니 다.
이 스 크 립 트 는 query 데 이 터 를 읽 은 다음 인자 style 의 값 을 쿠키 에 기록 하고 마지막 으로 이전 페이지 로 돌아 갑 니 다.다음 에 우 리 는 스타일 전환 에 사용 할 두 개의 링크 를 만 들 고 적당 한 페이지 에 놓 을 수 있 습 니 다.예 를 들 어 첫 페이지 나 사용자 관리 배경(그 중의 site.com 을 도 메 인 이름 으로 바 꾸 는 것 을 주의 하 십시오).
테마 A테마 B
임의의 링크 를 클릭 하면"a"또는"b"를 쿠키 에 기록 하고 이 쿠키 값 을 읽 고 XHTML 을 출력 하여 해당 하 는 CSS 를 도입 하 는 스 크 립 트 가 필요 합 니 다.
스타일 전환 이 필요 한 페이지 마다 이 코드 를 추가 해 야 하기 때문에 사이트 의 헤더 파일 에 직접 넣 으 면 됩 니 다.물론 당신 은 자신의 필요 에 따라 이 스 크 립 트 를 수정 할 수 있 지만 그 근본 에서 벗 어 나 지 않 고 전체적인 사 고 는 변 하지 않 을 것 입 니 다.
//미리 정 의 된 변수 var i, links;
//DOM 방법 으로 모든 링크 요 소 를 얻 습 니 다. links?= document.getElementsByTagName("link"); for(i=0; links[i]; i++) {
//이 링크 요소 의 rel 속성 에 style 키워드 가 있 는 지 판단 합 니 다. //이 링크 요소 가 스타일 시트 링크 인지 여부 입 니 다. //이 링크 요소 에 title 속성 이 있 는 지 판단 합 니 다. if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")) {
//우선 무작정 disabled 로 설정 합 니 다. links[i].disabled = true;
//title 에 우리 가 지정 한 키워드 가 있 는 지 판단 합 니 다. if(links[i].getAttribute("title").indexOf(title) != -1)
//있 으 면 활성화 links[i].disabled = false;} }}
?
좋은 웹페이지 즐겨찾기
