The same page to achieve a variety of CSS style sheet switch [switch]

2010-12-12  来源:本站原创  分类:Web  人气:102 

Separation of style and bring the data standard that is not only simple, style, and the separation of data since then, becomes a matter of course the style of a switch! However, the Chinese online tutorial that it is too little! So I collected some foreign websites have sorted out the technical information to achieve for the users reference.

Must first have a different content of CSS files (each file represents a best style, or need to make changes on behalf of the part.) Here with three examples:

The first is the background for the red CSS file (red.css) CSS contents are:
body {background-color: red;}

The second is the background for the green CSS file (green.css) CSS contents are:
body {background-color: green;}

The third is the background for the yellow CSS file (yellow.css) CSS contents are:
body {background-color: yellow;}

Then add in the xthml file links to the three CSS

<link rel="alternate stylesheet" href="red.css" mce_href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="green.css" mce_href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" mce_href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>

In addition to these three different but also have a title with a difference, that is REL. The first and third are alternate stylesheet is only the second stylesheet. This second style is, of course.

In the link below into a JS file and then used to control the style switch
function setActiveStyleSheet (title) {
var i, a, main;
if (title) {
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;
}

In the right place to join the three toggle buttons

<a href="javascript :void()" title=" Red style "> </ a>
<a href="javascript :void()" title=" Green style "> </ a>
<a href="javascript :void()" title=" Yellow style "> </ a>
<a href="javascript :void()" title=" There is no style "> </ a>

Well, try the point of publishing links to the three switches! Style is not already switched?

Addendum: JS document with memory function

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 = "";
document.cookie = name +"="+ value + expires + ";
path = / ";
}

function readCookie (name) {
var nameEQ = name + "=";
var ca = document.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);

Source: http://blog.sina.com.cn/s/blog_4b62146d01000a05.html

相关文章