다중 스타일 선택 및 스타일 실시간 전환 구현 방법

다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환

不言

풀어 주다： 2018-05-16 14:42:08

원래의

2872명이 탐색했습니다.

우리는 웹사이트를 만들 때 사용자가 자신의 취향에 따라 다양한 스타일을 선택할 수 있기를 바랍니다. 이러한 스타일은 레이아웃의 변경, 색상의 차이 또는 특별히 맞춤화된 스타일일 수 있습니다. 다양한 사용자 그룹에 대해.
다중 스타일 선택과 실시간 스타일 전환을 어떻게 달성할 수 있나요?
사실 IE에서는 이 기능을 지원하지 않습니다. FireFox는 이 기능을 지원하도록 맡길 수 있습니다.
두 개의 서로 다른 파일인 a.CSS와 b.CSS에 포함된 두 개의 CSS 세트가 있다고 가정합니다. 그런 다음 와

사이에 다음 두 줄의 XHTML 코드를 추가합니다.

<link rel="stylesheet" type="text/css" title="主题A" href="a.css?7.1.34" /> 
<link rel="alternate stylesheet" type="text/css" title="主题B" href="b.css?7.1.34" />

로그인 후 복사

그런 다음 Firefox에서 이 페이지를 열고 다음을 선택합니다. "테마 A"와 "테마 B"를 실시간으로 확인하고 선택할 수 있어야 합니다.
우리가 사용할 수 있는 또 다른 방법은 ASP, PHP, JSP 등과 같은 동적 프로그램을 사용하는 것입니다. 이 방법의 장점은 직접적이고 효율적이며 우수한 호환성과 사용자 선택을 기억하는 능력입니다. 사용자의 선택은 쿠키에 기록되거나 데이터베이스에 직접 기록될 수 있으며, 사용자가 다시 방문할 때 이전 방문에서 선택한 스타일이 직접 호출됩니다. 여기서는 특정 제작에 대해 자세히 다루지 않겠습니다. 저희 웹사이트 www.52css.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(&#39;;&#39;); 
for(var i=0;i < ca.length;i++) { 
var c = ca[i]; 
while (c.charAt(0)==&#39; &#39;) 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);

로그인 후 복사

위 코드는 다중 스타일 선택과 실시간 스타일 전환을 구현한 자바스크립트 스크립트입니다. 위 코드를 js 파일로 저장하면 됩니다. 필요한 페이지에 표시합니다. 직접 인용:

<script type="text/javascript" src="cssturn.js?7.1.34"></script>

로그인 후 복사

물론 페이지 내부에 위 코드를 직접 작성할 수도 있습니다.
세 가지 스타일이 있는데, 하나는 다른 두 스타일의 기본값입니다. 다음 세 가지 CSS 파일을 페이지 파일에 추가하세요.

<link rel="stylesheet" type="text/CSS" href="css.css?7.1.34" /> 
<link rel="stylesheet" type="text/CSS" href="aaa.css?7.1.34" title="aaa" /> 
<link rel="stylesheet" type="text/CSS" href="bbb.css?7.1.34" title="bbb" />

로그인 후 복사

이제 페이지에서 스타일을 전환하는 링크를 추가할 수 있습니다.

<a href="#" onclick="setActiveStyleSheet(&#39;&#39;,1); return false;">默认样式－白色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;aaa&#39;,1); return false;">样式一－蓝色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;bbb&#39;,1); return false;">样式二－橙色</a>

로그인 후 복사

이제 끝났습니다. 위의 결과를 테스트하고 효과를 살펴보겠습니다.

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" /> 
 

 
 
<a href="#" onclick="setActiveStyleSheet(&#39;&#39;,1); return false;">默认样式－白色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;aaa&#39;,1); return false;">样式一－蓝色</a> 
<a href="#" onclick="setActiveStyleSheet(&#39;bbb&#39;,1); return false;">样式二－橙色</a>

로그인 후 복사