웹 페이지의 CSS 스타일 실시간 전환

실시간으로 CSS 스타일 전환
W3C 표준으로 구축된 웹사이트는 이론적으로 성능과 구조의 완전한 분리를 달성할 수 있습니다. 예를 들어 뼈대(구조, XHMTL)와 근육(행동, Javascript)을 움직이지 않고도 피부(성능, CSS)를 완전히 변경할 수 있습니다.

물론 스킨을 변경하기 전에 W3C 표준에 따라 웹사이트를 구축하고 이를 위해 성능이 다른 두 가지 CSS 세트를 준비해야 합니다. "스킨 변경"은 본질적으로 "CSS 변경"입니다. 우리가 해야 할 일은 브라우저가 다른 CSS 세트를 로드하고 페이지를 다시 렌더링하도록 하는 것뿐입니다. 방법은 여러 가지가 있는데, 가장 많이 사용되는 세 가지 방법을 소개하겠습니다.

방법 1: 아무것도 하지 않음

응? 아무것도 안 하시나요? 뭐, 이건... 정확히 말하면 조금만 하면 됩니다(정말 이런 좋은 게 있다고 생각하시나요...).

두 개의 서로 다른 파일인 a.css와 b.css에 포함된 두 개의 CSS 세트가 있다고 가정해 보겠습니다. 그런 다음 와

그런 다음 Firefox에서 이 페이지를 열고 메뉴 표시줄에서 보기-> , 다음과 같은 "풍경"을 볼 수 있습니다:

매우 간단합니다. 이제 Firefox를 사용하여 "리스킨"할 수 있습니다. 즉? IE에는 이 기능이 없습니다...MS는 브라우저가 사용자에게 자신의 스타일 시트를 선택할 수 있는 권한을 제공해야 한다고 "명시적으로 권장"하지만 그렇게 하지 않습니다. 다행히 이 문제는 그리 복잡하지 않으므로 직접 해보겠습니다.

[구분자]

방법 2: Javascript

방법 1을 기준으로 Javascript의 DOM 메소드를 이용하여 링크 객체에 접근한 뒤 불필요한 CSS를 설정하면 된다. "비활성화"하면 나머지 CSS는 브라우저에서 페이지를 렌더링하는 데 사용됩니다. 스크립트는 다음과 같습니다. 댓글에 주의하세요.

그런 다음 이 함수를 적절한 위치에서 호출하고 이 페이지를 예로 들어 다음 두 개의 버튼을 추가합니다.

Javascript를 사용하는 장점은 편리하고 빠르며 간단하다는 것입니다. 단점도 명백합니다. 사이트 전체의 CSS를 전환하기 어렵고 현재 CSS로만 제한할 수 있습니다. 페이지. 이용자의 선택을 기억하기 위해 가능한 해결책은 쿠키를 사용하는 것입니다. 그러나 쿠키를 사용하더라도 CSS를 언제 로드해야 하는지, 사용자가 Javascript를 지원하지 않는 경우 어떻게 해야 하는지와 같은 문제에 대해 더 많은 기사를 작성해야 합니다. 따라서 다음 방법을 사용하는 것이 좋습니다 -

방법 3: 서버 측 스크립트

최고의 CSS 스위처가 서버 측 스크립트(PHP, ASP, JSP)를 사용해야 한다는 것은 의심의 여지가 없습니다. , 등) 개발. 이것의 이점은 명백합니다: 직접적이고 효율적이며 우수한 호환성, 사용자 선택을 기억할 수 있고 다양한 CSS를 결합하여 매우 복잡한 "스킨" 전환을 달성할 수도 있습니다.

여기에서는 PHP를 예로 들어보겠습니다. 다른 언어에서도 비슷할 것이므로 일반 개발자에게는 어렵지 않을 것입니다.

기본 아이디어는 다음과 같습니다. 사용자가 "스킨"을 선택하고, 사용자의 선택이 쿠키에 기록되고(데이터베이스에도 동일하게 기록되지만 시스템 오버헤드가 더 커집니다), 사용자가 방문합니다. 이때 웹사이트의 모든 페이지에서 이전 사용자의 선택 내용을 쿠키(또는 데이터베이스)에서 읽어와 해당 CSS 파일이 로드됩니다. (여기서도 방법 1에서 언급한 a.css 및 b.css를 예로 들어 보겠습니다.) .

다음 콘텐츠가 포함된 switcher.php라는 파일을 만듭니다.

먼저 이 스크립트를 읽어보세요. 데이터를 쿼리한 다음 매개변수 스타일의 값을 쿠키에 쓰고 마지막으로 이전 페이지로 돌아갑니다. 다음으로 스타일 전환을 위한 두 개의 링크를 만들어 홈페이지나 사용자 관리 백엔드와 같은 적절한 페이지에 배치할 수 있습니다(site.com은 도메인 이름으로 대체됩니다).

테마 A
테마 B　

링크 클릭 , 그에 따라 "a" 또는 "b"가 쿠키에 기록됩니다. 그런 다음 쿠키 값을 읽고 XHTML을 출력하여 해당 CSS를 도입하는 스크립트가 필요합니다.

title="현재 선택된 테마" href=".css" />

필요한 모든 페이지 스타일을 전환하려면 이 코드를 추가해야 하므로 웹사이트의 헤더 파일에 추가하면 됩니다. 물론 필요에 따라 이 스크립트를 수정할 수 있지만 일반적인 아이디어는 동일하게 유지되어야 합니다.